Nested Accordions

by Alex McWhinnie

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://assets.ipums.org/_css/jsfiddle.1.0.css">
<script src="https://assets.ipums.org/_js/load-fonts.1.3.js"></script>
<script src="https://assets.ipums.org/_js/page-tune-fiddle.1.5.js"></script>
<div class="accordion">
  <h2 class="accordion-header">Header 1</h2>
  <div class="accordion-content">
    <h3 class="accordion-header">Header 1a</h3>
    <div class="accordion-content">
      Content 1a goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 1b</h3>
    <div class="accordion-content">
      Content 1b goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 1c</h3>
    <div class="accordion-content">
      Content 1c goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>  
  </div>
  <h2 class="accordion-header">Header 2</h2>
  <div class="accordion-content">
    <h3 class="accordion-header">Header 2a</h3>
    <div class="accordion-content">
      Content 2a goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 2b</h3>
    <div class="accordion-content">
      Content 2b goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 2c</h3>
    <div class="accordion-content">
      Content 2c goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>  
  </div>
  <h2 class="accordion-header">Header 3</h2>
  <div class="accordion-content">
     <h3 class="accordion-header">Header 3a</h3>
    <div class="accordion-content">
      Content 3a goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 3b</h3>
    <div class="accordion-content">
     ...