1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help me with some sliding divs in jQuery

Discussion in 'HTML, Graphics & Programming' started by A.N.Other, 16 Jul 2011.

  1. A.N.Other

    Sgarrista

    Joined: 6 Nov 2005

    Posts: 8,064

    Location: MK45

    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:
    Code:
    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 :o

    Thanks for any input :)
     
    Last edited: 16 Jul 2011
  2. Tripnologist

    Mobster

    Joined: 12 May 2007

    Posts: 3,888

    Location: Bristol

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

    jQuery
    Code:
    $('#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
    Code:
    	<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>
    
     
  3. joeyjojo

    Soldato

    Joined: 2 Dec 2005

    Posts: 5,515

    Location: Herts

    I friggin love jquery.
     
  4. dave_a141

    Gangster

    Joined: 9 May 2005

    Posts: 121

    Location: Yorkshire

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

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

    Sgarrista

    Joined: 6 Nov 2005

    Posts: 8,064

    Location: MK45

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

    Mobster

    Joined: 12 May 2007

    Posts: 3,888

    Location: Bristol

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

    Sgarrista

    Joined: 6 Nov 2005

    Posts: 8,064

    Location: MK45

    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.
     
  8. Tripnologist

    Mobster

    Joined: 12 May 2007

    Posts: 3,888

    Location: Bristol

    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.
     
  9. dave_a141

    Gangster

    Joined: 9 May 2005

    Posts: 121

    Location: Yorkshire

    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:D