HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Click on the "Open Section" buttons below to see how accordions work
An accordion is used to show (and hide) HTML content.
Use the w3-hide class to hide the accordion content.
Use any kind of button to open and close the content:
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Both the element that is used to open the accordion and the accordion's content can be any HTML element.
This table shows the difference between an accordion and a dropdown:
Accordion | Dropdown |
---|---|
Content pushes the page content down | Content lays over existing the page content |
Content is often 100% wide | Content is 160px wide (default) |
Often used to open multiple sections | Often used to open one section |
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.
You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, to span the entire width of the page (100% width).
Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left-aligned instead. However, you do not have to follow our approach - an accordion will look good either way:
Normal button
Lorem ipsum...
Left aligned and full-width
Lorem ipsum...
Centered and full-width
Centered content as well!
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Use JavaScript to highlight accordions that are open (clicked on):
Open Section 1
Some text..
Open Section 2
Some other text..
function myFuncx(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; x.previousElementSibling.className = x.previousElementSibling.className.replace("w3-black", "w3-red"); } else { x.className = x.className.replace(" w3-show", ""); x.previousElementSibling.className = x.previousElementSibling.className.replace("w3-red", "w3-black"); }}
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
By default, the width of block is 100%. To override this, change the CSS width property of the accordion container:
Some text..
Some text..
Some text..
Some text..
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Accordion with links:
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Accordion as a List:
Accordion
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Accordion inside a Sidebar (You will learn more about sidebars later):
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Use any of the w3-animate-classes to fade, zoom or slide in the accordion content:
var mybtn = document.getElementsByClassName("testbtn"); var i; for (i = 0; i < mybtn.length; i++) { mybtn[i].click(); }
function myFunct(id) { var x = document.getElementById(id); if (x.classList) { x.classList.toggle("w3-show"); x.previousElementSibling.classList.toggle("w3-dark-grey"); } else { // Fallback for IE9 and earlier if (x.className.indexOf("w3-show") == -1) x.className = x.className + " w3-show"; else x.className = x.className.replace("w3-show", ""); } } function myFunc(id) { var x = document.getElementById(id); if (x.classList) { x.classList.toggle("w3-show"); } else { // Fallback for IE9 and earlier if (x.className.indexOf("w3-show") == -1) x.className = x.className + " w3-show"; else x.className = x.className.replace("w3-show", ""); } }