ardions

W3.CSS Accordions

An accordion is a toggleable panel of content. W3.CSS makes creating accordions simple with the w3-accordion class.

Basic Accordion Example

<button onclick="myFunction('accordion1')" class="w3-button w3-block w3-light-blue w3-left-align">
  Section 1
</button>
<div id="accordion1" class="w3-hide w3-container">
  <p>Content of Section 1.</p>
</div>

<script>
function myFunction(id) {
  var x = document.getElementById(id);
  if (x.classList.contains("w3-show")) {
    x.classList.remove("w3-show");
  } else {
    x.classList.add("w3-show");
  }
}
</script>

Multiple Accordions

You can add multiple accordion sections by duplicating the structure:

<button onclick="myFunction('accordion2')" class="w3-button w3-block w3-green w3-left-align">
  Section 2
</button>
<div id="accordion2" class="w3-hide w3-container">
  <p>Content of Section 2.</p>
</div>

<button onclick="myFunction('accordion3')" class="w3-button w3-block w3-teal w3-left-align">
  Section 3
</button>
<div id="accordion3" class="w3-hide w3-container">
  <p>Content of Section 3.</p>
</div>