FAQ page demo slideUp slideDown
/** JQUERY ACCORDION **/
$(document).ready(function(){
$(".accordion-switch").click(function(){
//$(this).closest(".accordion-item").addClass("selected") ;
var displ=$(this).closest(".accordion-item").find('.accordion-content').css('display');
$(this).closest('ul').find('.accordion-switch').each(function () {
var li = jQuery(this).closest('li');
li.find('.accordion-content').slideUp(300);
jQuery(this).parent().removeClass("selected");
});
if (displ == "block") {
$(this).closest(".accordion-item").find('.accordion-content').slideUp(300);
$(this).closest(".accordion-item").removeClass("selected") ;
} else {
$(this).closest(".accordion-item").find('.accordion-content').slideDown(300);
$(this).closest(".accordion-item").addClass("selected") ;
}
// $(this).closest(".accordion-item").find('.accordion-content').slideToggle();
});
});
/**** HTML code ****/
<ul class="accordion">
<!-- BEGIN faq -->
<li class="accordion-item">
<div class="accordion-switch">
<span class="togglegfx"></span>{faq.TITLE}
</div>
<div class="accordion-content" style="display: none;">
<p>
{faq.DESCRIPTION}
</p>
</div>
</li>
<!-- END faq -->
</ul>