Функция jQuery toggle для переключения определенного div (и не всех div с тем же именем класса.)

Question

Каждый <li></li> имеет переключатель и класс контента. Прямо сейчас, когда я нажимаю на переключатель, отображается каждый элемент контента. Использование jQuery, как я могу убедиться, что одновременно отображается только один контент?

<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 не является следующим родственником .toggle. Для ясности я удалил пару div, которые находятся между .toggle и .content.

Благодаря

Answer 1

Изменить $content.slideToggle() для $(this).next().slideToggle() при условии, что .content всегда следующий родственный .toggle

EDIT: так как это не так, что вы можете сделать, это использовать postid сек. Я думаю, было бы лучше использовать атрибут data-postid вместо того, чтобы добавлять его в id (или обойти оба), чтобы вам не пришлось анализировать его из идентификатора.

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