Hello Readers! In this blog we will discuss about one of the simplest type of accordion using jquery.

In this type of accordion the content will be displayed on the click event of the the particular section. This task will be performed using the jquery slideToggle() function. SlideToggle() function is used to slide the content up and down on click.

HTML Code:

<div class="container">

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

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

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

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

In the above code, on clicking on the "accordion-heading" div, the content of that particular "accordion-content" will be visible which is by default hidden. Also, the plus sign will change into the minus sign on click.

Juery Code:

$(function(){

	$('.accordian-heading h2').click(function(){
		$(this).siblings('.accordian-content').slideToggle();
		$(this).children('span').toggleClass('minus');
	});

});

The above jquery code is simple to understand the concept of the basic accordion. Here, we have used the slideToggle() function which will slide the content div on click.

For output click on the link below

Happy Coding :)