CODEWITHSUNDEEP
javascriptjquerycssanimation
Shaun Woolf
Shaun Woolf

Reputation: 1

Making divs slide down (not open) when a div above is opened

So here's my question--and I'm not too well versed in programming just yet, so please be patient:

I would like to have a list of objects on my page, with each functioning as a toggle to open a div. That part I have down! What I can't figure out is how to make it so that divs below the opened object slide below the newly opened div. Currently they just sit there on top the content within the opened div. Thanks!

Upvotes: 0

Views: 690

Answers (3)

Taufik Nurrohman
Taufik Nurrohman

Reputation: 3409

Please, do not use JQuery UI if it's only for a small project. You can use the normal way to close all panels that has been opened when a trigger is clicked and open the panel that closest to the next button:

$(function() {
    // Hide all panels
    $('#accordion .content').hide();
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    // When the trigger is clicked...
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Remove all "active" classes and close all the panels that has been opened.
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            // Open one panel that placed right next to the trigger
            // only if the next panel is hidden
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Here is an example: http://jsfiddle.net/tovic/CzE3q/ Hope this help :)

Upvotes: 0

sadu
sadu

Reputation: 1

The effect you are asking about is already available via the jQuery javascript library. The jQuery ui abstraction provides the accordion effect.

From jqueryui.com :

<!-- this is the format of the html markup needed -->
<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

and

<script>
    //and the JavaScript code for it
        $(function() {
        $( "#accordion" ).accordion();
    });
</script>

Upvotes: 0

Starx
Starx

Reputation: 79021

Its called an Accordion Effect. Check out the jQuery UI Accordion Effect here

Here it's a very simple version of the accordion effect, I just created it using jQuery.

Upvotes: 2

Related Questions