JQuery Переключить слайд детского элемента

Question

Я пытаюсь создать список титров, которые при нажатии будут показывать информацию под ними, а затем при повторном нажатии скрывает этот элемент.

Вот мой JQuery:

$(document).ready(function() { 

     $('.content').hide(); 

     $(".reveal-more").click(function() { 
      $(".content", this).slideDown("slow"); 
      $(".content", this).addClass("open-information"); 
      $(".reveal-more h3").addClass("open-container"); 

     }); 

     $(".reveal-more").click(function() { 

      $(".content").hide(); 
     }); 

}); 

и вот мой HTML:

<div class="reveal-more "> 
    <h3 >Party Wall Act</h3> 
    <div class="content"> 
      Lorem Ipsum ..... 
      </div> 
</div> 

Когда я нажимаю титул. контент скользит вниз, но он не будет скользить назад, когда я снова нажму на него. Может ли кто-нибудь помочь?

Answer 1

toggle() и toggleClass();

$(document).ready(function() { 

    $('.content').hide(); 

    $(".reveal-more").click(function() { 
     $(".content", this).toggle("slow"); 
     $(".content", this).toggleClass("open-information"); 
     $(".reveal-more h3").toggleClass("open-container"); 

    }); 
}); 

fiddle here

Answer 2

Вам нужно сделать условие в случае щелчка, Wheter, чтобы показать/скрыть содержимое. Прямо сейчас вы привязываете событие click два раз, где последний переопределяет предыдущий. Вы должны изменить код на что-то вроде этого:

$(".reveal-more").click(function() { 
    if ($(".content", this).hasClass('open-information')){ 
     // It is visible, then hide it 
     $(".content", this).removeClass("open-information").slideUp("slow"); 
     $("h3", this).removeClass("open-container"); 
    } else { 
     // Show it, as you previously did 
     $(".content", this).addClass("open-information").slideDown("slow"); 
     $("h3", this).addClass("open-container"); 
    } 
});