Accordions

Add accordions to your story

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

1. Add Code Block anywhere in your story

2. Open your Code Block and insert the following code snippet to add the accordion functionality

  <button class="custom-nonfabl-accordion">Section 1</button>
  <div class="custom-nonfabl-accordion-panel">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  
  <button class="custom-nonfabl-accordion">Section 2</button>
  <div class="custom-nonfabl-accordion-panel">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  
  <button class="custom-nonfabl-accordion">Section 3</button>
  <div class="custom-nonfabl-accordion-panel">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  
  <style>
    .custom-nonfabl-accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
    }
    
    .custom-nonfabl-accordion + div.custom-nonfabl-accordion-panel {
      height: 0px;
      transition: height 1s ease-out 0.2s;
    }
    
    .accordion-active,
    .custom-nonfabl-accordion:hover {
      background-color: #ccc;
    }
    
    .accordion-active + div.custom-nonfabl-accordion-panel {
      height: 60px;
    }
    
    .custom-nonfabl-accordion-panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
    }
  </style>
  
  <script>
    cb(function() {
      let accordion = document.querySelectorAll(".custom-nonfabl-accordion");
      for (let i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener("click", function() {
          this.classList.toggle("accordion-active");
          let panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
        });
      }
    })
  </script>

3. This is how the accordions will look like in View mode (in the published story)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Already an experienced user?

See what else you can do to enhance your story.