Simple HTML, CSS, and JavaScript Accordion Program With Source Code. You must have seen accordion in many websites. Mostly website uses accordion in their FAQ section. This feature is pretty awesome because you can put text or info this these accordion box. But the text will be hidden, when the user wants to see this then it will be visible.

Today you will learn how to create a simple JavaScript accordion program. This program is in pure HTML, CSS, & JavaScript without any libraries or framework. You can use this accordion program on your website. Basically, this program has 3 boxes with texts, but texts are hidden until you click on the box.

Preview Of This Accordion Program

If you have not idea about accordion lets see a preview, you will be understood the whole system. Then you will realize you had seen this before.

Now, You can see how this program looks. When I click on given tabs then the tabs become expand, & When I click on it again text will hide. This is a simple & clean program, you can use or place is anywhere as you want. If you want the source code of this program, Don’t worry because now time to provide code.

You May Also Like

Source Code Of JavaScript Accordion With HTML and CSS

Before sharing source code, First I want to say you in-depth about this javascript accordion program. I had created 4 divs, 1 main <div> and other 3 divs put on the main div. But the <p> under divs are hidden, when I click on div then the <p> paragraphs become visible using JavaScript. When height increasing there I put CSS transition transition: max-height 0.2s ease-in-out; for the animation effect. ( know about CSS transition )

You have to create 3 files for this program. One file for HTML, One for CSS, & Last file for JavaScript.

index.html

Create an HTML file named ‘index.html‘ or any name as you want & put these codes given below.

index.html <!doctype html> <html lang="en"> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <head> <meta charset="utf-8"> <title>Accordion By Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- content starts here --> <div class="container"> <h1>Simple Accordions | WebDevTrick.com</h1> <button class="accordion">First Accordion</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Second Accordion</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Third Accordion</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> </div> <!-- contend ends here --> <script src="function.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!doctype html> <html lang = "en" > <!-- code by webdevtrick ( https://webdevtrick.com ) --> <head> <meta charset = "utf-8" > <title> Accordion By Webdevtrick.com </title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <link rel = "stylesheet" href = "styles.css" > </head> <body> <!-- content starts here --> <div class = "container" > <h1> Simple Accordions | WebDevTrick.com </h1> <button class = "accordion" > First Accordion </button> <div class = "accordion-content" > <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class = "accordion" > Second Accordion </button> <div class = "accordion-content" > <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class = "accordion" > Third Accordion </button> <div class = "accordion-content" > <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> </div> <!-- contend ends here --> <script src = "function.js" > </script> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and copy & paste these code.

style.css /** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color: #6DC4F4; }h1 { color:white; } .container { width: 80%; max-width: 600px; margin: 50px auto; } button.accordion { width: 100%; background-color: whitesmoke; border: none; outline: none; text-align: left; padding: 15px 20px; font-size: 18px; color: #333; cursor: pointer; transition: background-color 0.2s linear; } button.accordion:after { content: '\f055'; font-family: "fontawesome"; font-size: 14px; float: right; } button.accordion.is-open:after { content: '\f056'; } button.accordion:hover, button.accordion.is-open { background-color: #ddd; } .accordion-content { background-color: white; border-left: 1px solid whitesmoke; border-right: 1px solid whitesmoke; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 /** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color : #6DC4F4 ; } h1 { color : white ; } .container { width : 80% ; max-width : 600px ; margin : 50px auto ; } button.accordion { width : 100% ; background-color : whitesmoke ; border : none ; outline : none ; text-align : left ; padding : 15px 20px ; font-size : 18px ; color : #333 ; cursor : pointer ; transition : background-color 0.2s linear ; } button.accordion:after { content : '\f055' ; font-family : "fontawesome" ; font-size : 14px ; float : right ; } button.accordion.is-open:after { content : '\f056' ; } button.accordion:hover, button.accordion.is-open { background-color : #ddd ; } .accordion-content { background-color : white ; border-left : 1px solid whitesmoke ; border-right : 1px solid whitesmoke ; padding : 0 20px ; max-height : 0 ; overflow : hidden ; transition : max-height 0.2s ease-in-out ; }

function.js

The last thing, You have to create a JavaScript file called ‘function.js‘ and put these codes.

function.js /** code by webdevtrick ( https://webdevtrick.com ) **/ var accordions = document.getElementsByClassName("accordion"); for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /** code by webdevtrick ( https://webdevtrick.com ) **/ var accordions = document . getElementsByClassName ( "accordion" ) ; for ( var i = 0 ; i < accordions . length ; i ++ ) { accordions [ i ] . onclick = function ( ) { this . classList . toggle ( 'is-open' ) ; var content = this . nextElementSibling ; if ( content . style . maxHeight ) { // accordion is currently open, so close it content . style . maxHeight = null ; } else { // accordion is currently closed, so open it content . style . maxHeight = content . scrollHeight + "px" ; } } }

That’s It. Now you have a successfully created Javascript accordion program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.