How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.

asp

  HTML CSS JAVASCRIPT SQL   

 Tutorials  References  Exercises  Menu  Log in

Website NEW Paid Courses

How TO - Collapsibles/Accordion
❮ Previous Next ❯

Learn how to create an accordion (collapsible content).

Accordion
Accordions are useful when you want to toggle between hiding and showing large
amount of content:

Section 1 +

Section 2 +

Section 3 +

Try it Yourself »

1 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

  HTML CSS JAVASCRIPT SQL   

Create An Accordion
Step 1) Add HTML:

Example

<button class="accordion">Section 1</button>

<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>

<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>

<div class="panel">
<p>Lorem ipsum...</p>
</div>

Step 2) Add CSS:

Style the accordion:

Example

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;

2 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

border: none;
  HTML
outline: none;
CSS JAVASCRIPT SQL   
transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active

class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */

.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}

Step 3) Add JavaScript:

Example

var acc = document.getElementsByClassName("accordion");

var i;

for (i = 0; i < acc.length; i++) {

acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");

/* Toggle between hiding and showing the active panel */

var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";

3 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

} else {
  HTML CSS JAVASCRIPT
panel.style.display = "block";
SQL   
}
});
}

Try it Yourself »

Animated Accordion (Slide Down)

To make an animated accordion, add max-height: 0 , overflow: hidden and a
transition for the max-height property, to the panel class.

Then, use JavaScript to slide down the content by setting a calculated max-height ,
depending on the panel's height on different screen sizes:

Example

<style>
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {

acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {

4 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

panel.style.maxHeight = null;
 } HTML
else {
CSS JAVASCRIPT SQL   
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

Try it Yourself »

Add Icons
Add a symbol to each button to indicate whether the collapsible content is open or
closed:

Example

.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Try it Yourself »

❮ Previous Next ❯

5 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

  HTML CSS JAVASCRIPT SQL   

NEW

We just launched
W3Schools videos

Explore now

COLOR PICKER



Get certified
by completing
a course today!

school
w3 s
2
CE

02

TI 2
R

FI .
ED

6 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

  HTML CSS JAVASCRIPT SQL

Get started   

CODE GAME

Play Game

Report Error Forum About Shop

Top Tutorials Top References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference

7 of 8 1/25/2022, 11:43 PM
How To Create an Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

  HTML CSS
Top Examples JAVASCRIPT SQL Web Courses   
HTML Examples HTML Course
CSS Examples CSS Course
JavaScript Examples JavaScript Course
How To Examples Front End Course
SQL Examples SQL Course
Python Examples Python Course
W3.CSS Examples PHP Course
Bootstrap Examples jQuery Course
PHP Examples Java Course
Java Examples C++ Course
XML Examples C# Course
jQuery Examples XML Course

Get Certified »

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.

8 of 8 1/25/2022, 11:43 PM