Edit in JSFiddle

<h1>
Nested accordions
</h1>


<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">
      Content 3b goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div>
    <h3 class="accordion-header">Header 3c</h3>
    <div class="accordion-content">
      Content 3c goes here. It can be anything. A list, a table, multiple paragraphs, etc. 
    </div> 
  </div>
</div>