W3.CSS — Accordions

Basic Accordion

<button onclick="myAccordion('demo1')" class="w3-button w3-block w3-left-align">
    Click to open Panel 1
</button>
<div id="demo1" class="w3-hide w3-border">
    <div class="w3-container">
        <p>Panel 1 content goes here.</p>
    </div>
</div>

<button onclick="myAccordion('demo2')" class="w3-button w3-block w3-left-align">
    Click to open Panel 2
</button>
<div id="demo2" class="w3-hide w3-border">
    <div class="w3-container">
        <p>Panel 2 content goes here.</p>
    </div>
</div>

<script>
function myAccordion(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>

Accordion Styles

<!-- With icons -->
<button onclick="myAccordion('panel1')" class="w3-button w3-block w3-left-align w3-blue">
    ▶ Panel 1
</button>
<div id="panel1" class="w3-hide w3-border">
    <div class="w3-container">Content 1</div>
</div>

<!-- With numbers -->
<button onclick="myAccordion('panel2')" class="w3-button w3-block w3-left-align w3-green">
    1. First Section
</button>
<div id="panel2" class="w3-hide w3-border">
    <div class="w3-container">Content 2</div>
</button>

Accordion Examples

<!-- FAQ accordion -->
<button onclick="myAccordion('faq1')" class="w3-button w3-block w3-left-align">
    What is W3.CSS?
</button>
<div id="faq1" class="w3-hide w3-border">
    <div class="w3-container">
        <p>W3.CSS is a modern CSS framework with built-in responsiveness.</p>
    </div>
</div>

<button onclick="myAccordion('faq2')" class="w3-button w3-block w3-left-align">
    How do I install W3.CSS?
</button>
<div id="faq2" class="w3-hide w3-border">
    <div class="w3-container">
        <p>Simply add the CDN link to your HTML head section.</p>
    </div>
</div>

<button onclick="myAccordion('faq3')" class="w3-button w3-block w3-left-align">
    Is W3.CSS free?
</button>
<div id="faq3" class="w3-hide w3-border">
    <div class="w3-container">
        <p>Yes, W3.CSS is free to use under the Apache 2.0 license.</p>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic accordion
2. Adds an FAQ accordion
3. Uses accordion with different styles
4. Creates an accordion with icons

Up Next

Next: Learn about W3.CSS Tabs.