Home Web Development Simple HTML, CSS, and JavaScript Accordion | Example & Source Code

Simple HTML, CSS, and JavaScript Accordion | Example & Source Code

April 10, 2019

25102

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.

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.

<!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>

<!doctype html>

<head>

<title>Accordion By Webdevtrick.com</title>

</head>

<body>

<h1>Simple Accordions | WebDevTrick.com</h1>

<button class="accordion">First Accordion</button>

<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>

</p>

<p>

</p>

</div>

<button class="accordion">Second Accordion</button>

<p>

</p>

</div>

<button class="accordion">Third Accordion</button>

<p>

</p>

</div>

</body>

</html>

style.css

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

/** 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;
}

/** 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.

/** 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";
    }
  }
}

/** 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.

18 COMMENTS

Kiersten April 11, 2019 At 7:49 pm

I’ve been surfing on-line more than three hours as
of late, yet I by no means found any fascinating article like yours.
It is lovely worth sufficient for me. In my view, if all webmasters and bloggers made good content material as you did, the net can be
much more helpful than ever before. Ahaa, its fastidious conversation about this paragraph at this place at this website, I have read all that, so now me also commenting here.
I couldn’t refrain from commenting. Very well written!

Reply
- shaan April 12, 2019 At 4:00 am
  
  thank you
  
  Reply
Jona April 13, 2019 At 4:06 am

It’s the best time to make some plans for
the future and it is time to be happy. I have read this post and if I could I desire to suggest you some
interesting things or advice. Maybe you could write next articles referring to this article.
I wish to read more things about it! There’s definately a great deal to
know about this issue. I really like all of the points you have made.
I could not refrain from commenting. Perfectly written! http://samsung.com/

Reply
www April 14, 2019 At 11:24 am

Well I really enjoyed reading it. This tip provided by
you is very practical for good planning.

Reply
- shaan April 14, 2019 At 4:34 pm
  
  thank you very much
  
  Reply
Jimmy April 14, 2019 At 1:38 pm

Howdy! Someone in my Facebook group shared this website with us so I came to check it out.
I’m definitely loving the information. I’m book-marking and will be tweeting this to my
followers! Terrific blog and superb design. I am sure this
article has touched all the internet people, its really really pleasant article on building up
new website. It is the best time to make some plans for the
future and it is time to be happy. I’ve read this publish and if
I may just I desire to suggest you some attention-grabbing things
or suggestions. Maybe you could write next articles
regarding this article. I want to read more things about it!
http://aoc.com/

Reply
Radiant Farms Keto Review April 15, 2019 At 1:26 pm

Hello, i think that i saw you visited my site thus i came to ?return the favor?.I’m attempting to find things to
enhance my site!I suppose its ok to use some of your ideas!!

Reply
- shaan April 15, 2019 At 2:10 pm
  
  thank you very much
  
  Reply
Apex Legends April 27, 2019 At 1:51 am

bookmarked!!, I love your site!

Reply
- shaan April 27, 2019 At 4:05 am
  
  Thank You Very Much!
  
  Reply
Google May 15, 2019 At 10:12 am

Google

Below youll come across the link to some internet sites that we assume you should visit.

Reply
RDG August 29, 2019 At 7:52 am

Thank you.
Change with
If not , not same result 😉

Reply
- RDG August 29, 2019 At 7:54 am
  
  In index.html change styles.css with style.css.
  (My comment not appear)
  
  Reply
rohit aggarwal November 11, 2019 At 6:53 am

thanks for the information https://webdevtrick.com/

Reply
Anamika March 5, 2020 At 7:28 am

Hi, I have been using this accordion for my website. It works well.
Could you please tell how can we keep a menu in collapsed/expanded state on page refresh? I have 3 accordions having filters inside them. On collapsing first two accordions and using filters on the third one, there is a search query which refreshes the page so my accordions gets expanded. I want the keep the accordions closed if user has collapsed them initially. Could you help.
Thanks.

Reply
Jagdeo Sewgoolam April 8, 2020 At 1:09 am

Hi Shaan
I was on your website(Webdevtrick.com) and I came across How to make an Accordian.
I put all 3 files in a folder and name them as follows:
1 index.html
2 style.css
3 function.js
But I try to activate nothing happen, only the Html shows up.
Any suggestion.
Thanks.

Reply
Sud April 12, 2021 At 3:27 pm

Hi – could you let me know how to keep just one accordion open automatically? I’m new to HTML so I apologize if this is super obvious.

Reply
L June 9, 2022 At 6:44 pm

Can you please provide function to allow for the first tab to be open by default?

Reply