How to close other open elements when one is opened in jQuery?

Question

I know. The title was a bit....hard to understand. I will see what I can do to help you understand it.

Basically, what I've done for my personal site is the main navigation as the body of the web page. And when a link is clicked, it loads some hidden content, like so:

    $(document).ready(function(){
    $('li a#about-toggle').click(function(){
        $('li#about').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#portfolio-toggle').click(function(){
        $('li#portfolio').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#resume-toggle').click(function(){
        $('li#resume').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
    $('li a#contact-toggle').click(function(){
        $('li#contactme').animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

This currently allows the visitor of the website to open all of the elements, which is not only visually displeasing, but creates a few bugs, but mostly visually displeasing.

My question is, with the code I have remaining as in-tact as possible, how would I make it so they can only have ONE open at a time?

Thanks in advance, Jacob

EDIT:

    $(document).ready(function(){
    $('#about-toggle').click(function(){
        $("li.active").addClass("hidden");
        $('#about').animate({"height": "toggle", "opacity": "toggle"}, "slow").removeClass("hidden").addClass("active");
    });
    $('#portfolio-toggle').click(function(){
        $("li.active").addClass("hidden");
        $('#portfolio').animate({"height": "toggle", "opacity": "toggle"}, "slow").removeClass("hidden").addClass("active");
    });
    $('#resume-toggle').click(function(){
         $("li.active").addClass("hidden");
        $('#resume').animate({"height": "toggle", "opacity": "toggle"}, "slow").removeClass("hidden").addClass("active");
    });
    $('#contact-toggle').click(function(){
        $("li.active").addClass("hidden");
        $('li#contactme').animate({"height": "toggle", "opacity": "toggle"}, "slow").removeClass("hidden").addClass("active");
    });
});

jfriend00 · Accepted Answer · 2012-08-07T08:02:14.273

2

Put a common class on all the elements you want to close. Close them all except the one you clicked on and then open the one you clicked on. The ones that are already closed will do nothing when you close them again.

Suppose you added the class togglers to each one, then you could do this and also shorten your jQuery into one block for all elements:

$(document).ready(function(){
    $('#about-toggle, #portfolio-toggle, #resume-toggle, #contact-toggle').click(function(){
        // get the clicked on id and convert it to shortened form
        var id = this.id.replace(/\-.*$/, "");
        var item = $("#" + id);
        // toggle others that are open and toggle the current one
        $(".togglers").not(".hidden").add(item).animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

or, if you don't put the common class on them, then you just have to list them all:

$(document).ready(function(){
    $('#about-toggle, #portfolio-toggle, #resume-toggle, #contact-toggle').click(function(){
        // get the clicked on id and convert it to shortened form
        var id = this.id.replace(/\-.*$/, "");
        var item = $("#" + id);
        // toggle others that are open and toggle the current one
        $('#about, #portfolio, #resume, #contact').not(".hidden").add(item).animate({"height": "toggle", "opacity": "toggle"}, "slow").toggleClass("hidden"); 
    });
});

This implementation assumes that the .hidden class is applied to any items that are toggled closed and removed from any items that are open and the initial HTML state must match that.

edited Aug 07 '12 at 08:02

answered Aug 07 '12 at 07:16

jfriend00

683,504
96
985
979

Hey thanks for that. I added it and commented out my old code. But this just does what my code did. Lets them all be opened. Any idea why? Thanks again, Jake – Aug 07 '12 at 07:29
Thanks for adding that edit, but that did not work either. It's let the list do the same thing as before. – Aug 07 '12 at 07:37
I wasn't sure how you closed the other ones - I thought just adding the "hidden" class was enough, but maybe not. I've modified my answer to try to copy the way you were doing it. – jfriend00 Aug 07 '12 at 07:37
Thanks again, but that allows the first one to be opened, closed, and none of them to be opened. Any ideas why? :/ You can check it out at: http://www.jakeandersen.me/ – Aug 07 '12 at 07:44
@JacobAndersen - that's as much guessing as I can do when you don't provide the relevant HTML in your question or supply an example jsFiddle. The concept is there for getting a selector with all the others in it. I've modified my answer with one last GUESS as to what you want. – jfriend00 Aug 07 '12 at 07:56
You sir are the God of JavaScript. I apologize, I thought I had given a pastebin link, guess not! Sorry! This worked, thank you so much! :) – Aug 07 '12 at 08:12

score 0 · Answer 2 · answered Aug 07 '12 at 07:17

0

On "click" first hide all elements (for example $('li').hide(); ) and then show the one you would like to show.

answered Aug 07 '12 at 07:17

sznowicki

1,351
5
16
33

Hey, thanks for the reply. However using that code, it hides the main-links as well. Do you know how to hide JUST the hidden contents? Here is my HTML: http://pastebin.com/GnD53yHA – Aug 07 '12 at 07:24
It was the example. Group the elements you want to hide by adding them a class, then hide the class. What's more, if you select element by it's ID, you do not need other DOM selectors. Long story short: ('li a#contact-toggle') == ('#contact-toggle'). – sznowicki Aug 07 '12 at 07:36
Thanks again, can you clarify 'group the elements', and possibly a short example of what you mean? – Aug 07 '12 at 07:47
Group of elements = all the elements you want to hide/show by the jQuery script we talking about. Probably it looks like this `
- something
- something else
.` Its actually a group now (group of DOM elements), but you need a class to hide just them, not other document elements. So you can simply add class to ul element `
– sznowicki Aug 07 '12 at 07:52
I've edited my original post with something of what I made out of your reply. But it's still not working. Any ideas? :\ – Aug 07 '12 at 08:08

How to close other open elements when one is opened in jQuery?

2 Answers2