JavaScript Accordion is a collapsible content list. Basically, developers need to create the accordion to show & hide the largest content. So, you will get the best accordion to integrate into your project.
If you have large content to display in a small section on the web page, then you have the best option to arrange those contents in proper format using Javascript Accordion.
How to Create Accordion in JavaScript
You will learn to create an accordion of description. you will show and hide the description by clicking the plus (+) & minus ( – ) symbol.
You will get the following type of accordion,
- Showing current accordion and hiding other accordions
- Showing current accordion and not hiding other accordions.
- Showing the first accordion by default.
1. Configure basic requirements
First of all, you should create the following folder structure for testing purposes. otherwise, you can use the given script in your project.
accordion/ |__accordion-content.html |__accordion-script.js |__accordion-style.css |
Include the following files in the accordion-content.html file
File Name: accordion-script.js
<script type="text/javascript" src="accordion-script.js"></script>
File Name: accordion-style.css
<link rel="stylesheet" href="accordion-style.css">
2. Create Accordion List using HTML
Write the following HTML code to create an accordion list. These are created with the dummy content for showing the demo. you will replace it with your own content.
File Name: accordion-content.html
<div class="accordion-container"> <!--==== accordion list-1 =====--> <div class="accordion-content hide"> <h3 class="title"> What is Lorem ipsum?</h3> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <!--==== accordion list-2 =====--> <div class="accordion-content hide"> <h3 class="title"> What is Lorem ipsum? </h3> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <!--==== accordion list-3 =====--> <div class="accordion-content hide"> <h3 class="title"> What is Lorem ipsum? </h3> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <!--==== accordion list-4 =====--> <div class="accordion-content hide"> <h3 class="title"> What is Lorem ipsum? </h3> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <!--==== accordion list-4 =====--> <div class="accordion-content hide"> <h3 class="title"> What is Lorem ipsum? </h3> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>
3. Design Accordion using CSS
Write the following CSS code to design the accordion list. you can write with your own CSS code.
File Name: accordion-style.css
.accordion-content .description {
background: white;
color: #4f4f4f;
cursor: pointer;
padding: 5px 5px 5px 25px;
max-width: 100%;
outline: none;
font-size: 16px;
margin: 4px 0px;
position: relative;}
.accordion-content .description p {
margin:0px;
color:gray;}
.accordion-content .title {
margin: 10px 5px;
font-weight: normal;
position: relative;
padding: 0px 20px;
cursor:pointer;}
.accordion-content.show .description{
display:block;}
.accordion-content.hide .description{
display:none;}
.accordion-content.hide .title::before{
content: " + ";
position:absolute;
left:5px}
.accordion-content.show .title::before{
content: " - ";
position:absolute;
left:5px}This accordion is created with plus (+) & minus (-) symbol using the following CSS code
.accordion-content.hide .title::before{
content: " + ";
position:absolute;
left:5px}
.accordion-content.show .title::before{
content: " - ";
position:absolute;
left:5px}If you have to create accordion with another symbol, you will have to replace the value of content properties with that symbol string.
.accordion-content.hide .title::before{
content: " replace it with your symbol string ";
position:absolute;
left:5px}
.accordion-content.show .title::before{
content: " replace it with your symbol string ";
position:absolute;
left:5px
}
4. Create Accordion Using JavaScript
- Showing current accordion and hiding other accordions
Write the following script to show the current accordion description and to hide other accordion descriptions.
File Name: accordion-script.js
var acontent = document.querySelectorAll('.accordion-content');
var atitle = document.querySelectorAll('.accordion-content .title');
for (i = 0; i < atitle.length; i++) {
atitle[i].onclick=function(){
var contentClass = this.parentNode.className;
for (i = 0; i < acontent.length; i++) {
acontent[i].className = 'accordion-content hide';
}
if (contentClass == 'accordion-content hide') {
this.parentNode.className = 'accordion-content show';
}
}
}
- Showing current accordion and not hiding other accordions.
Write the following script to show the current accordion description and not hiding other accordion descriptions.
File Name: accordion-script.js
var atitle = document.querySelectorAll('.accordion-content .title');
for (i = 0; i < atitle.length; i++) {
atitle[i].onclick=function(){
if ( this.parentNode.className == 'accordion-content hide') {
this.parentNode.className = 'accordion-content show';
}else{
this.parentNode.className = 'accordion-content hide';
}
}
}- Showing the first accordion list by default.
If you have to show the first accordion description by default, you will have to remove hide class from the first accordion parent div.
Conclusion
Dear Developer, I hope you have learned How to create a javascript accordion. Now, you can easily integrate it in your project.
I will share more javascript & web technology tutorials as soon as possible. So, To learn more javascript coding, continue to visit my blog and share it with your friends.