Latest web development tutorials
 

W3.CSS Accordions


Accordion

An accordion is used to show (and hide) content that is broken into sections.

Click on the "Open Section" buttons below to see how it works:

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.

Accordion with Images:

Trolltunga, Norway

The w3-accordion class defines an accordion, and the w3-accordion-content class defines the part to be displayed:

Example

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</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>

Try it Yourself »

Both the element that is used to open the accordion and the accordion's content can be any HTML element.


Accordion vs. Dropdown

The list below shows the difference between an accordion and a dropdown:

Accordions

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.


  • Content is 100% wide (spans the entire width of the parent element)
  • When opened, it pushes the page content down, if any (position:relative)
  • Often used to "open" multiple sections

Dropdowns

  • Content is minimum 160px wide and more if needed
  • When opened, it lays over the page content (position:absolute)
  • Often used to "open" one section

Accordion Buttons

You can use any HTML element to open the accordion content. We prefer a button with a w3-btn-block class, because it spans the entire width of its parent element, just like the accordion content (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:

Lorem ipsum...

Lorem ipsum...

Centered content as well!

Example

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunc('Demo1')" class="w3-btn">
    Normal button
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align w3-green">
    Left aligned & full-width
  </button>
  <div id="Demo2" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo3')" class="w3-btn-block w3-red">
  Centered & full-width
  </button>
  <div id="Demo3" class="w3-accordion-content w3-center">
    <p>Centered content as well!</p>
  </div>
</div>

Try it Yourself »


Active Accordion Buttons

Use JavaScript to highlight accordions that are open (clicked on):

Some text..

Some other text..

Example

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

Try it Yourself »


Accordion Width

By default, the width of an accordion is 100%. To override this, change the CSS width property of the w3-accordion container:

Some text..

Some text..

Some text..

Some text..

Example

<div class="w3-accordion w3-light-grey" style="width:50%">
  <button onclick="myFunction('Demo1')" class="w3-btn-block">
    50%
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Some text..</p>
  </div>
</div>

Try it Yourself »


Accordion Content

Accordion with links:

Example

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Try it Yourself »

Accordion as a Card with lists:
  • Jill
  • Eve
  • Adam

Example

<div class="w3-accordion w3-card-4">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <ul class="w3-ul">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
  </div>
</div>

Try it Yourself »

Accordion inside a Sidenav (Note: you will learn more about side navigations later):

Example

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

Try it Yourself »


Animated Accordions

Use any of the w3-animate-classes to fade, zoom or slide in the accordion content:

Example

<div id="Demo1" class="w3-accordion-content w3-animate-zoom">

Try it Yourself »