Help me with some sliding divs in jQuery

[A.N.Other]

I've got a problem I've previously solved with mootools, but I'm looking to translate it into jQuery to integrate nicely into Drupal. Can anyone take a look over it for me?

The idea: a cross between an accordion and simple sliding divs. I have a set of links in the footer (imagine the 'Contact Us - Overclockers UK - Top' links at the bottom of the forum page) that I'd like to be able to link to divs that slide in and out when the corresponding link is clicked. These divs will be separate from the list (could be above or below the links), so generic accordion applications won't work. Generic sliding div solutions won't work either, as I'd like open divs to close before a new one opens, and these generally act on a single div.

No divs are open & a link is clicked - slide open the appropriate div.
A div is open & a different link is clicked - slide closed open div & then open the new one.
A link to div that is already open is clicked - slide closed the div.

In mootools, this looked like this:

window.addEvent('domready',function() {    
    // add referring elements to an array
    var headings = $$('.collapselabel');
    // array to store all of the collapsibles
    var collapsibles = new Array();

    // for the number of elements in headings
    headings.each(function(heading, i) {
        // get corresponding div.collapse
        var coldivid = 'collapse' + heading.id.substring(13);
        var coldiv = document.getElementById(coldivid);
        // set effects for collapsible
        var collapsible = new Fx.Slide(coldiv, {
            duration: 500,
            transition: Fx.Transitions.quad
        });
        // stores entry in collapsibles array
        collapsibles[i] = collapsible;
        //add event listener
        heading.onclick = function(){
            escapelink:
            // if collapsible is closed
            if (!collapsible.open) {
                // slide closed any open collapsibles
                for (var j=0; j<collapsibles.length; j++){
                    if (j!=i) {
                        if (collapsibles[j].open) {
                            // and chain-open this one
                            collapsibles[j].slideOut().chain(function(){collapsible.slideIn();});
                            }
                            break escapelink;
                        }
                    }
                }
                // ... open this collapsible if no others are found open
                collapsible.slideIn();
            }
            // else if collapsible is open ...
            else
            {
                if (collapsible.open) {
                    // ... slide it closed
                    collapsible.slideOut();
                }
            }
            return false;
        }
        // hides collapsible before display
        collapsible.hide();
    });
});

Done a fair amount of mootools, but never jQuery

Thanks for any input

 

[Tripnologist]

I just wrote this out without testing, but it should work fine for you.

jQuery

$('#slideNav a').click(function(e){

	var index = $(this).parent('li').index();

	// If selected div is already open, close it
	if($('#slideDivs > div:eq('+ index +')').is(':visible')){
		$('#slideDivs > div').slideUp();
	}

	// Else close open divs and then open selected div
	else {
		$('#slideDivs > div:visible').slideUp();
		$('#slideDivs div:eq('+ index +')').slideDown();
	}

	e.preventDefault();

});

HTML

	<div id="slideDivs">	
		<div>Div1</div>
		<div>Div2</div>
		<div>Div3</div>				
	</div>

	<ul id="slideNav">
		<li><a href="#">Div1</a></li>
		<li><a href="#">Div2</a></li>		
		<li><a href="#">Div3</a></li>				
	</ul>

 

[joeyjojo]

I friggin love jquery.

 

[dave_a141]

Just a slight modification to Tripnologist's code so that it does the animation sequentially:

// Else close open divs and then open selected div
else {
     $('#slideDivs > div:visible').slideUp('fast',function(){
          $('#slideDivs div:eq('+ index +')').slideDown();
     });
}

 

[A.N.Other]

Thanks gents, that's great! I'm amazed at how much more compact jQuery is then Mootools

 

[Tripnologist]

Thanks gents, that's great! I'm amazed at how much more compact jQuery is then Mootools

jQuery really is great. The size difference between your script and mine is quite drastic considering they do the exact same thing.

 

[A.N.Other]

jQuery really is great. The size difference between your script and mine is quite drastic considering they do the exact same thing.

Well not exactly the same thing, I don't think. The original would work if there were items in the slideNav that didn't correspond to items in the slideDivs, as it uses absolute referencing via elements ids. Haven't tried yours yet, but a quick scan tells me that's probably the case.

 

[Tripnologist]

I had actually done mine to require IDs at first, but then changed it to use index instead as I thought it more robust.

However, changing it back to use IDs is literally a 30 second job and wouldn't increase the script size at all.

 

[dave_a141]

jQuery really is great. The size difference between your script and mine is quite drastic considering they do the exact same thing.

It almost feels like cheating in a way! Many times I've just looked at code and thought that it shouldn't be this easy