Simple jQuery accordion with Expand and Collapse option
Hi friends,
I am here to share a Experience with jQuery with out additional plugin a simple accordion with Expand and Collapse option.
Note : a Little hick up is while expand / collapse heading height variant will fix and update the post
/*slide toggle funtion*/
$('.accHeader h2').each(function () {
$(this).parent().find('.container').hide();
$(this).addClass('open close');
});
$('.accHeader li:first').find('.container').slideDown();
$('.accHeader li:first').find('h2').removeClass('close');
$('.expand-icon-active').click(function () {
var isClose = $('.accHeader h2').hasClass('close');
if (isClose) {
$('.accHeader h2').each(function () {
$(this).parent().find('.container').slideDown();
$(this).removeClass('close');
});
} else {
$('.accHeader h2').each(function () {
$(this).parent().find('.container').slideUp();
$(this).addClass('close');
});
}
});
$('.accHeader h2').click(function () {
$(this).parent().find('.container').slideToggle();
$(this).toggleClass('close');
});
Let me know you thoughts on this.