jQuery toggle - Close all except this

Question

I have found this code (jQuery):

$('.toggle').click(function() {
    $('.container').eq($(this).index()).toggle('fast');
});

This is my HTML:

<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>

CSS

.container {
   display: none;
}

I can toggle what I want with it.

The problem

When I click the toggle-class I want to close all open container-classes BUT NOT the current container-class (because it should be toggled).

The current container-class should toggle. That means that all elements could be closed BUT ONLY ONE could be opened at the same time.

I tried to just put jQuery hide before the script but that makes the container-class impossible to close (because when toggle hide is equal to show).

Code guess hide all .container except this

Community · Accepted Answer · 2017-05-23 10:28:34Z

3

Using David's answer as a starting point, we can use .siblings to accomplish what you want:

$('.toggle').click(function() {
    var index = $(this).index();
    $('.container').eq(index).toggle().siblings('.container').hide();
});

See: https://www.jsfiddle.net/85zCp/

As an aside, you might want to use JavaScript to hide all elements initially instead of CSS because users with JavaScript disabled won't be able to see any content if you use CSS to hide them. Also, you would probably want to have each h4 heading in front of the contents instead of it put together like you're doing right now.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 11, 2011 at 12:12

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

I want the HTML structure like I have it right now. That is because I have like a top menu that toggles things in the middle. Thanks for the suggestion with hiding h4 with Javascript. Everything now works the way I want.
– Jens Törnell
Commented Jan 11, 2011 at 12:31

Add a comment |

Padel · Accepted Answer · 2011-01-11 11:21:24Z

1

$('.toggle').click(function () { $('.container').hide('fast'); $('.container').eq($(this).index()).show('fast'); });

I don't know exactly but I think this is what you're looking for...

Cheers...

answered Jan 11, 2011 at 11:21

Padel

9,0071 gold badge19 silver badges11 bronze badges

It don't work as I hoped. When I click "Title 3" content shows like it should. When I click "Title 3" again it should toggle, in this case hide. With your code it's impossible to hide it. Maybe it will be more clear if I say I have a CSS-file to set content-divs to display: none. That way I start from nothing and then show what I want. I updated my post to make it mode clear what it should do.
– Jens Törnell
Commented Jan 11, 2011 at 11:38

Add a comment |

David Thomas · Accepted Answer · 2011-01-11 11:23:06Z

1

This is a little verbose, but its use should be fairly obvious:

$('.toggle').click(
    function(){
        var index = $(this).index();
        $('.container').hide().eq(index).show();
    });

JS Fiddle demo.

answered Jan 11, 2011 at 11:23

David Thomas

254k53 gold badges382 silver badges421 bronze badges

It don't work as I hoped. When I click "Title 3" content shows like it should. When I click "Title 3" again it should toggle, in this case hide. With your code it's impossible to hide it. Maybe it will be more clear if I say I have a CSS-file to set content-divs to display: none. That way I start from nothing and then show what I want.
– Jens Törnell
Commented Jan 11, 2011 at 11:38

Add a comment |

Collectives™ on Stack Overflow

jQuery toggle - Close all except this

3 Answers 3

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related