Accordion menu – Readymag Help

Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.

We recommend enlisting a professional web developer to work with Code Injection—Readymag support won’t be able to assist with custom code issues.

This code snippet was provided by Readymag user Headless Horse.

To add an accordion to your project, create a Сode widget, double-click on it and insert the following code into the widget's code section (removing all the rest):

<div class="accordion-container">
  <p class="accordion" style="border-top: 1px solid #999;">Panel 1</p>
  <div class="accordion-content">
    <p>
      Text line 1
      <br />
      Text line 2
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <p class="accordion">Panel 2</p>
  <div class="accordion-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ea odit dicta illum adipisci, consequatur numquam veniam harum hic temporibus possimus esse voluptatem omnis necessitatibus vero in facere totam iusto similique quas sapiente earum ipsam aut? Praesentium saepe, eaque aspernatur sapiente facere iusto? Aliquam libero dolorum inventore, illo animi magni eius nulla cupiditate quis, alias qui minus ratione possimus itaque sapiente sint assumenda consectetur sit at earum quod. Porro earum blanditiis delectus animi libero iste praesentium at sequi cupiditate numquam corrupti facilis nihil necessitatibus dolorum temporibus odio laudantium omnis, eos voluptates ipsam dolore quis enim ex! Pariatur cumque obcaecati modi.
    </p>
    <br />
  </div>

  <p class="accordion">Panel 3</p>
  <div class="accordion-content">
    <p>
      Text line 2
      <br />
      <a href="https://readymag.com/examples" target="_blank">examples</a>
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <style>
    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: Inter;
      font-size: 18px;
    }

    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: Inter;
      font-size: 14px;
    }

    /* accordion content link styles */
    .accordion-container .accordion-content a {
      font-family: Inter;
      font-size: 14px;
      font-style: italic;
    }

    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 8px;
      margin: 0;
      font-weight: 300;
    }

    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      float: right;
      transform: rotate(-45deg);
      font-size: 11px;
      transition: .2s ease-out;
    }

    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: rotate(0deg);
      font-size: 11px;
    }

    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0 8px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      border-bottom: 1px solid #999;
    }

  </style>
</div>
<script>
  (function() {
  const accordionHeading = document.querySelectorAll(".accordion");
  const accordionContent = document.querySelectorAll(".accordion-content");

  for (let i = 0; i < accordionHeading.length; i++) {
    accordionHeading[i].onclick = function() {
      if (this.nextElementSibling.style.maxHeight) {
        hideContent();
      } else {
        showContent(this);
      }
    };
  }

  function showContent(elem) {
    hideContent();
    elem.classList.add("active");
    elem.nextElementSibling.style.maxHeight =
      elem.nextElementSibling.scrollHeight + "px";
  }

  function hideContent() {
    for (let i = 0; i < accordionContent.length; i++) {
      accordionContent[i].style.maxHeight = null;
      accordionHeading[i].classList.remove("active");
    }
  }
  })();
</script>

After that, do not forget to press ‘Save & Close’ to apply the pasted code.

You can easily edit the text style and add other variables for the <p> and <a> tags, so that the accordion menu adapts better to your design. To change the font, simply edit the font-family in the following code section:

/* accordion title text styles */
.accordion-container p.accordion {
  font-family: Inter;
  font-size: 18px;
}

/* accordion content text styles */
.accordion-container .accordion-content p {
  font-family: Inter;
  font-size: 14px;
}

If you would like to use a custom font, then first, you need to upload it in the text widget. After that, using the Web Inspector tool, please find the name of the font family to enter it in the pasted code.

To change the borders of the containers, edit the border-bottom in the .accordion-panel part of the <style> section.

To replace the icon that will close your menu or change its behavior, alter this part of code:

.accordion-container .accordion::after {
  content: '✕';
  float: right;
  transform: rotate(-45deg);
  font-size: 11px;
  transition: .2s ease-out;
}

.accordion-container .active::after {
  content: "✕";
  transform: rotate(0deg);
  font-size: 11px;
}

You can use any text symbol or even emoji as the content value.

Related articles