Create Accordion using JavaScript and Jquery

Example 1: Accordion Using Jquery

In this article, you will learn how to give HTML accordance effect using Jquery function such as addclass(), removeClass(), slideUp() and slideDown() functions.

As we can create an accordance effect without Jquery and Javascript's use as those accordance is simple without having a good animation effect.

In this, tutorial we will create accordance with animation effect with the help of slideUP() and slideDown() function.

1) Create Basic HTML for the Accordion

<div class="accordion">
    	<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 1</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion One Content</p>
                </div>
            </div>
        </div>
		<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 2</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion Two Content</p>
                </div>
            </div>
        </div>
    </div>

In the above code, we have created a wrapper div <div class="accordion"> to restrict all the functionality of Accordion in the main div tag. We have created another div under <div class="accordion"> name as <div class="accordion-box"> which contain the accordian we want to create. To create multiple accordian we need to duplicate this div.

The div tag <div class="accordion-header"> define the header of the accordian and and <div class="accordion-body"> is the body of accordion.

CSS Code

.accordion{
	max-width:100%;
	display:block;
	margin:auto
	}
.accordion .accordion-box{
	box-shadow:0 0 20px #d4d4d4;
	margin-bottom:20px;
	float:left;
	width:100%;
	}
.accordion .accordion-box .accordion-header h4{
	cursor:pointer;
	color:#fff;
	position:relative;
	background-color:#000;
	margin:0;padding:15px 20px
}
.accordion .accordion-box .accordion-header{
	position:relative
}
.accordion .accordion-box .accordion-header span{
	position:absolute;
	right:20px;
	top:12px;
	height:25px;
	width:25px;
	color:#000;
	background-color:#ffd461;
	border-radius:50%;
	text-align:center;
	line-height:25px;
	font-size:13px!important
}
.accordion .accordion-box .accordion-body{
	padding:20px
}
.accordion .accordion-box .accordion-body{
	display:none
}
.accordion .accordion-box .accordion-body p{
	font-size:15px;
	line-height:24px;
	color:#000;
	margin:0
}

In the above CSS code, we have just defined the CSS style for the accordion

Jquery Code

 $( document ).ready(function() {
        $('.accordion-header').click(function(){
            // self clicking close
            if($(this).next(".accordion-body").hasClass('active')){
                $(this).next(".accordion-body").removeClass('active').slideUp();
                $(this).children("span").removeClass("fa-minus").addClass("fa-plus");
            }else{
                $(".accordion-box .accordion-body").removeClass('active').slideUp();
                $('.accordion-box .accordion-header span').removeClass("fa-minus").addClass("fa-plus");
                $(this).next(".accordion-body").addClass('active').slideDown();
                $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
            }
        });
});

In the above code, we are creating an accordion using Jquery. Let’s understand how the code works?

When we click on .accordion-header div, we will first check if the next div tag class is active by jquery hasClass('active') function, if the body div is active then we close the body div with slideUp() function and change the minus icon to plus by using removeClass("fa-minus") and addClass("fa-plus") functions

In the same way if the div .accordion-header is not in active state then we will add class active addClass('active') and show the content of accordion using slideDown() function and change the plus icon to minus using removeClass("fa-plus") & addClass("fa-minus").

Complete Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accordion Using Jquery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<style>
.accordion{
	max-width:100%;
	display:block;
	margin:auto
	}
.accordion .accordion-box{
	box-shadow:0 0 20px #d4d4d4;
	margin-bottom:20px;
	float:left;
	width:100%;
	}
.accordion .accordion-box .accordion-header h4{
	cursor:pointer;
	color:#fff;
	position:relative;
	background-color:#000;
	margin:0;padding:15px 20px
}
.accordion .accordion-box .accordion-header{
	position:relative
}
.accordion .accordion-box .accordion-header span{
	position:absolute;
	right:20px;
	top:12px;
	height:25px;
	width:25px;
	color:#000;
	background-color:#ffd461;
	border-radius:50%;
	text-align:center;
	line-height:25px;
	font-size:13px!important
}
.accordion .accordion-box .accordion-body{
	padding:20px
}
.accordion .accordion-box .accordion-body{
	display:none
}
.accordion .accordion-box .accordion-body p{
	font-size:15px;
	line-height:24px;
	color:#000;
	margin:0
}
</style>
<script>
    $( document ).ready(function() {
        $('.accordion-header').click(function(){
            // self clicking close
            if($(this).next(".accordion-body").hasClass('active')){
                $(this).next(".accordion-body").removeClass('active').slideUp();
                $(this).children("span").removeClass("fa-minus").addClass("fa-plus");
            }else{
                $(".accordion-box .accordion-body").removeClass('active').slideUp();
                $('.accordion-box .accordion-header span').removeClass("fa-minus").addClass("fa-plus");
                $(this).next(".accordion-body").addClass('active').slideDown();
                $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
            }
        });
    });
</script>
</head>
<body>
	<div class="accordion">
    	<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 1</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion One Content</p>
                </div>
            </div>
        </div>
		<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 2</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion Two Content</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

 
Run Code: https://www.stechies.com/code-examples/accordiance-jquery.html

Example 2: Accordion Using Jquery without Auto-Close

If you don’t want to auto close other accordion windows then we need to simply remove the below code from the previous example.

$(".accordion-box .accordion-body").removeClass('active').slideUp();
                $('.accordion-box .accordion-header span').removeClass("fa-minus").addClass("fa-plus");

The complete code is given below

Code Example:

<html><head>
<meta charset="utf-8">
<title>Accordion Using Jquery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<style>
.accordion{
	max-width:100%;
	display:block;
	margin:auto
	}
.accordion .accordion-box{
	box-shadow:0 0 20px #d4d4d4;
	margin-bottom:20px;
	float:left;
	width:100%;
	}
.accordion .accordion-box .accordion-header h4{
	cursor:pointer;
	color:#fff;
	position:relative;
	background-color:#000;
	margin:0;padding:15px 20px
}
.accordion .accordion-box .accordion-header{
	position:relative
}
.accordion .accordion-box .accordion-header span{
	position:absolute;
	right:20px;
	top:12px;
	height:25px;
	width:25px;
	color:#000;
	background-color:#ffd461;
	border-radius:50%;
	text-align:center;
	line-height:25px;
	font-size:13px!important
}
.accordion .accordion-box .accordion-body{
	padding:20px
}
.accordion .accordion-box .accordion-body{
	display:none
}
.accordion .accordion-box .accordion-body p{
	font-size:15px;
	line-height:24px;
	color:#000;
	margin:0
}
</style>
<script>
    $( document ).ready(function() {
        $('.accordion-header').click(function(){
            // self clicking close
            if($(this).next(".accordion-body").hasClass('active')){
                $(this).next(".accordion-body").removeClass('active').slideUp();
                $(this).children("span").removeClass("fa-minus").addClass("fa-plus");
            }else{
                $(this).next(".accordion-body").addClass('active').slideDown();
                $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
            }
        });
    });
</script>
</head>
<body>
	<div class="accordion">
    	<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 1</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion One Content</p>
                </div>
            </div>
        </div>
		<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 2</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
                <div>
                	<p>Accordion Two Content</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Run Code: https://www.stechies.com/code-examples/accordiance-jquery-nonauto.html

Example 3: Accordion using Javascript

The above example of accordion we can achieve by using Javascript only

Accordion HTML

<div class="accordion">
    	<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 1</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
               <p>Accordion One Content</p>
            </div>
        </div>
		<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 2</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">                
               <p>Accordion Two Content</p>
            </div>
        </div>
</div>

The above example is simple HTML to create an accordion box.

CSS Code

.accordion{
	max-width:100%;
	display:block;
	margin:auto
	}
.accordion .accordion-box{
	box-shadow:0 0 20px #d4d4d4;
	margin-bottom:20px;
	float:left;
	width:100%;
	}
.accordion .accordion-box .accordion-header h4{
	cursor:pointer;
	color:#fff;
	position:relative;
	background-color:#000;
	margin:0;padding:15px 20px
}
.accordion .accordion-box .accordion-header{
	position:relative
}
.accordion .accordion-box .accordion-header span{
	position:absolute;
	right:20px;
	top:12px;
	height:25px;
	width:25px;
	color:#000;
	background-color:#ffd461;
	border-radius:50%;
	text-align:center;
	line-height:25px;
	font-size:13px!important
}
.accordion .accordion-box .accordion-body{
	padding:20px;
	display:none
}

.accordion .accordion-box .accordion-body p{
	font-size:15px;
	line-height:24px;
	color:#000;
	margin:0
}

The above code is to add CSS to the HTML with plus and minus icons using a font-awesome library.

Accordion Javascript

As this example is to show the working of Accordion using JavaScript, so all action comes in this block.

var val = document.getElementsByClassName("accordion-header");
var i;
for (j = 0; j < val.length; j++) {
   val[j].addEventListener("click", function() {
      this.classList.toggle("active");
      var accordion = this.nextElementSibling;
	  var c = this.children;
	   
      if (accordion.style.display === "block") {
         accordion.style.display = "none";
		 c[1].classList.remove("fa-plus");
		 c[1].classList.add("fa-minus");
      } else {
         accordion.style.display = "block";
		 c[1].classList.remove("fa-minus");
		 c[1].classList.add("fa-plus");
      }
   });
}

 In the above code, we count the “accordion-header” div by using val.length method and check which div got clicked “val[j].addEventListener("click", function()” and toggle the state of inactive div to active.

 Now to display the content of clicked accordion div we will change the property of accordion-body div to display block with the help of “var accordion = this.nextElementSibling;” code.

Add Plus & Minus Icon

 We are using font-awesome to show plus and minus icon

 As our plus-minus icon is in <span> tag under <div class="accordion-header"> div so we need to change the class of <span> tag with the given below code

First, take the value of child element of active div

var c = this.children;

And then adding and removing class according to the condition

var c = this.children;
	   
      if (accordion.style.display === "block") {
		 c[1].classList.remove("fa-plus");
		 c[1].classList.add("fa-minus");
      } else {
		 c[1].classList.remove("fa-minus");
		 c[1].classList.add("fa-plus");
      }

Complete Code:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<style>
.accordion{
	max-width:100%;
	display:block;
	margin:auto
	}
.accordion .accordion-box{
	box-shadow:0 0 20px #d4d4d4;
	margin-bottom:20px;
	float:left;
	width:100%;
	}
.accordion .accordion-box .accordion-header h4{
	cursor:pointer;
	color:#fff;
	position:relative;
	background-color:#000;
	margin:0;padding:15px 20px
}
.accordion .accordion-box .accordion-header{
	position:relative
}
.accordion .accordion-box .accordion-header span{
	position:absolute;
	right:20px;
	top:12px;
	height:25px;
	width:25px;
	color:#000;
	background-color:#ffd461;
	border-radius:50%;
	text-align:center;
	line-height:25px;
	font-size:13px!important
}
.accordion .accordion-box .accordion-body{
	padding:20px;
	display:none
}

.accordion .accordion-box .accordion-body p{
	font-size:15px;
	line-height:24px;
	color:#000;
	margin:0
}
</style>
</head>
<body>
<div class="accordion">
    	<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 1</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">
               <p>Accordion One Content</p>
            </div>
        </div>
		<div class="accordion-box">
        	<div class="accordion-header">
            	<h4>Accordion 2</h4>
                <span class="fa fa-minus"></span>
            </div>
            <div class="accordion-body">                
               <p>Accordion Two Content</p>
            </div>
        </div>
    </div>
<script>
var val = document.getElementsByClassName("accordion-header");
var i;
for (j = 0; j < val.length; j++) {
   val[j].addEventListener("click", function() {
      this.classList.toggle("active");
      var accordion = this.nextElementSibling;
	  var c = this.children;
	   
      if (accordion.style.display === "block") {
         accordion.style.display = "none";
		 c[1].classList.remove("fa-plus");
		 c[1].classList.add("fa-minus");
      } else {
         accordion.style.display = "block";
		 c[1].classList.remove("fa-minus");
		 c[1].classList.add("fa-plus");
      }
   });
}
</script>
</body>
</html>

Run Code: https://www.stechies.com/code-examples/accordiance-javascript.html