Get a free trial // Grow your CSS skills // Land your dream job

.slideToggle one div a time

  • # March 5, 2012 at 12:21 am

    Hello All!

    I am having some problems configuring the jQuery .slideToggle to only open one div per click. I have two links – each link toggles open/close a separate div – however if one div is open, and the link to toggle the second div is clicked, they both remain open and stacked on each other.

    My goal is to configure this to only allow one div to be toggled open at a time. If the first div is open—clicking the link to toggle the second will close the open div.
    It seems to be something quite simple, but I can’t seem to wrap my hands on it. Any help is much appreciated. Thank you.

    Here is a jsFiddle Link:

    # March 5, 2012 at 12:43 am

    How about this:

    I have removed the duplication that you have going on in your code, so that way it doesn’t matter how many list items you have; the one function will work. I’d love for someone who knows more about jQuery to step in and suggest improvements.

    # March 5, 2012 at 1:12 am

    Hi Josh,

    That is sort of what I’m hoping to achieve – although I need the open div to close completely before the closed div opens. Thanks for the suggestion

    # March 5, 2012 at 2:09 am

    Right, I have updated the above link :)

    # March 5, 2012 at 2:25 am

    Hey Josh,

    Thanks for the reply. That seems to actually work… however… I’m wondering if there is a better solution to the ‘delay’ method. I think the toggle should fire immediately when the link is clicked rather than having the delay – I do understand it is needed for your method to function correctly. Thanks

    # March 5, 2012 at 2:36 am

    This is just built on Josh’s answer

    I initially thought having the slidedown within a callback of slideup would make it wait, but I was wrong

    # March 5, 2012 at 2:56 am

    @NSR Of course, sorry. Here it is with that taken care of:

    # March 5, 2012 at 3:18 am

    Hey Josh, That seems to work great. My last request/comment…I noticed you moved the box div inside the ul list. Could this be done by having those divs outside of the UL?

    # March 5, 2012 at 3:24 am

    Not without having to rewrite the jQuery for each anchor/div pair (as you originally had). I would try and use positioning to make my version work.

    # March 5, 2012 at 3:27 am

    ok…I will give it a shot. Thank you for the help. Much appreciated.

    # March 5, 2012 at 3:44 am

    Don’t forget to return false the default action of the anchor link

    # March 5, 2012 at 3:48 am

    Good point @karlpcrowley, I have updated the fiddle to do just that:

    # January 16, 2013 at 12:54 pm

    How would one accomplish this with divs instead of lists?
    [Website in progress]( “Website in progress”)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed