CODEWITHSUNDEEP
jqueryhtml
Caro_deb
Caro_deb

Reputation: 279

jQuery toggle function for toggling specific div (and not all div with same class name.)

Each <li></li> has a toggle and a content class. Right now, when I click on toggle, every content item is shown. Using jQuery, how can I make sure only one content is displayed at a time?

<script>
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
</script>

  <li class="cell" id="bar1">
    <div id="update1"><?php echo $post?></div>
    <div class="toggle" id="toggle1"></div>
    <div id="check"><a href="#" class="check" id="check1">read</a></div> 
    <div class="upvote"><a href="#" class="like" id="1"><span class="thumbsup"></span>   
    </a></div>       
    <div class="upvote"><a href="#" class="like" id="upvote1">
    <div id="deletepost"><a href="#" id="1">delete</a></div>
    <div class="content" id="1"><img src="images/balloon.jpg"  
    </div>
  </li>

EDIT: .content is not the next sibling of .toggle. For clarity purposes, I removed a couple of divs that come between .toggle and .content.

Thanks

Upvotes: 0

Views: 1007

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

Change $content.slideToggle() to $(this).next().slideToggle() assuming that .content is always the next sibling of .toggle

EDIT: since it's not, what you can do is use the postids. I think it would be better to use the data-postid attribute instead of adding it to the id (or do both) so that you don't have to parse it from the ID.

$(".content[data-postid=" + $(this).data('postid') + "]").slideToggle();

Upvotes: 2

Related Questions