W3.CSS Accordions

❮ Previous Next ❯

Basic Accordion

Accordions show and hide sections of content.

They are useful when you want to organize a lot of information in a small space.

Use a button to open and close the accordion content.

The w3-hide class hides the content.

JavaScript adds or removes the w3-show class:

Some text...

Example

<button onclick="myFunction('Demo1')" class="w3-button w3-block">
Open the Section
</button>

<div id="Demo1" class="w3-container w3-hide">
<p>Some text...</p>
</div>

<script>
function myFunction(id) {
document.getElementById(id).classList.toggle("w3-show");
}
</script>

Try It Yourself »

Accordion vs. Dropdown

Accordions and dropdowns both show hidden content, but they behave differently:

Accordion	Dropdown
Content becomes part of the page	Content appears over the page
Often spans the available width	Often appears as a smaller menu
Useful for sections of content	Useful for menus and choices

Accordion Buttons

Accordion buttons are often set to span the entire width of its parent element (100% width) with w3-block.

Use w3-left-align to align the button text to the left:

Some text...

Example

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align w3-green">
Open Section
</button>

<div id="Demo1" class="w3-hide w3-container">
<p>Some text...</p>
</div>

Try It Yourself »

Accordion Content

Accordion content can contain links, buttons, images, lists, or any other HTML content.

Link 1 Link 2 Link 3

Example

Try It Yourself »

Active Accordion Buttons

You can change the button style when an accordion is open:

Some text...

Example

function myFunction(button, id) {
const element = document.getElementById(id);
element.classList.toggle("w3-show");
button.classList.toggle("w3-black");
button.classList.toggle("w3-red");
}

Try It Yourself »

Accordion Width

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

Some text..

Example

Try it Yourself »

What You Have Learned

In this chapter you have learned how to:

Show and hide content with w3-hide and w3-show
Create full-width accordion buttons with w3-block
Put links, lists, and other HTML inside accordions
Style active accordion buttons

More Examples

Explore more ways to use accordions.

Accordion with a List

Jill
Eve
Adam

Try It Yourself »

Example

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

Try it Yourself »