Правильная настройка для использования slideToggle

Ребята, я пытаюсь получить список постов, и его содержимое не должно отображаться при загрузке страницы, но в каждом div есть кнопка развернуть, которая будет разворачивать только этот конкретный пост. Вот код, который у меня есть до сих пор: 

<div class="postEntry">

    <div class="collapsibleContent">
         <div class="postContent"></div>
    </div>

    <div class="actionDiv">
        <span id="actionWording">Read More</span>
        <a href="#" id="actionLink" class="open"></a>
    </div>

</div>

<div class="postEntry">

    <div class="collapsibleContent">
         <div class="postContent"></div>
    </div>

    <div class="actionDiv">
        <span id="actionWording">Read More</span>
        <a href="#" id="actionLink" class="open"></a>
    </div>

</div>

Я хотел бы сделать actionDiv кликабельным, чтобы контент отображался, но также имел формулировку внутри actionWording, изменяющуюся на свернутую, если контент расширяется. actionLink-это тег привязки, который имеет фоновое изображение, установленное css и классом open закрывать.

Вот что у меня есть для JS: 

jQuery(function()
{

  $('.collapsibleContent').each(function() {
    $(this).css('display', 'none');
  });

  $('.actionButton').click(function() {
    $(this).next('.collapsibleContent').slideToggle('fast')
    return false;
  });

});
2 2
jquery each toggle

2 ответа:

демо jsBin

Ищите .prev() и используйте метод .hide(), и вам не нужно возвращать false, если вы не используете якоря , но в этом случае я бы предложил использовать event.preventDefault() 

$(function(){

  $('.collapsibleContent').hide();

  $('.actionButton').click(function( ev ) {
      ev.preventDefault();

      var visible = $(this).prev('.collapsibleContent').is(':visible'),
         slideTog = visible?'slideUp':'slideDown',
              txt = visible?'EXPAND':'COLLAPSE';

      $('.collapsibleContent').slideUp().next('.actionButton').text('EXPAND');

      $(this).text( txt ).prev('.collapsibleContent')[slideTog]();

  });

});
2

Должно быть так(с помощью parent()):

$(document).ready(function()
{
  $('.collapsibleContent').css('display', 'none');

  $('.actionButton').click(function() {
    $(this).parent().find('.collapsibleContent').slideToggle('fast');
    if ( $(this).html() == 'COLLAPSE' )
      $(this).html('EXPAND');
    else
      $(this).html('COLLAPSE');
  });

});
2