Hello Readers! In our previous blog we discussed about the simplest accordion with default functionalities. In this blog we will be discussing about the another type of accordion with content collapse feature. In this type of accordion when we click on one div, the content of other div will hide and the content of that particular div on which we clicked will be visible. For performing this task we have used jquery slideUp() and slideDown() functions.

HTML Code:

<div class="container">

	<div class="accordion-heading" >
		<h2>accordion 1 <span class="plus">+</span></h2>
		<div class="accordion-content">
			<p>This is a sample content of an accordion which is visible on click.</p>
		</div>
	</div>

	<div class="accordion-heading">
		<h2>accordion 2 <span class="plus">+</span></h2>
		<div class="accordion-content">
			<p>This is a sample content of an accordion which is visible on click.</p>
		</div>
	</div>

	<div class="accordion-heading">
		<h2>accordion 3 <span class="plus">+</span></h2>
		<div class="accordion-content">
			<p>This is a sample content of an accordion which is visible on click.</p>
		</div>
	</div>

	<div  class="accordion-heading">
		<h2>accordion 4 <span class="plus">+</span></h2>
		<div class="accordion-content">
			<p>This is a sample content of an accordion which is visible on click.</p>
		</div>
	</div>
</div>

The above html code is same as we have mentioned in our previous blog. The difference is in the jquery code that you will see below.

Jquery Code:

$(function(){

	$(".accordion-heading h2").click(function(){
            $(this).parent().siblings().children('div').slideUp();
            $(this).parent().siblings().children('h2').children('span').text("+");
            
            if($(this).siblings('.accordion-content').is(":visible")){
                $(this).siblings('.accordion-content').slideUp();
                $(this).children("span").text("+");
            }else{
                $(this).siblings('.accordion-content').slideDown();
                $(this).children("span").text("-");
            }
        });

});

Here, when we click on the div with class "accordion-heading" it will first check whether the content div is visible or not. If the div is visible it will close the content with the help of slideUp() function. And if the content is not visible it will display the content using the slideDown() function. Also, the sign will change respectively.

For output download the below file.

Happy Coding :)