CODEWITHSUNDEEP
javascriptjquery
Tarrant
Tarrant

Reputation: 359

List of items, content expands on click, if item already expanded then collapse

Basically, I have a list of items whose content expands on click. Only one item's content can be expanded at once - i.e. if I click on one item, it's content will expand and another item's content will collapse.

What I am looking for is if one item is clicked on and its content is already expanded, I would like it to collapse. As my code is now, if content is aldreay expanded and the item is clicked on, the content simply re-expands.

Thank you so much for your help!

JS

$('.image-container').click(function() {
     $('.text-container').hide(200);
     $(this).next('.text-container').show(400);
});

HTML

<div id="class1" class="image-container">
    <a href="#">An Image</a>
</div>
<div id="class1-container" class="text-container">
    <p>Some Content</p>
</div>

 <div id="class2" class="image-container">
    <a href="#">An Image</a>
 </div>
 <div id="class2-container" class="text-container">
     <p>Some Content</p>
 </div>

Upvotes: 0

Views: 964

Answers (1)

artm
artm

Reputation: 8584

See http://jsfiddle.net/esgk2hve/

$('.image-container').click(function() {
     $('.text-container').not($(this).next()).hide(200);
     $(this).next('.text-container').toggle(400);
});

Upvotes: 1

Related Questions