Accordion menu

A menu with unfolding items can come handy as a table of contents for a reasonably long text—for example, in FAQs.

A step-by-step guide to making one is available at Help. It utilizes some custom code, but you needn’t know coding—just follow the instructions.
Mar-14-2022 22-46-42
Do you have an example of a great accordion menu? Please, share!

2 Likes

Hey, great code, but how to reverse (slide up) the animation ? (from bottom to up)

This is a really handy feature. How do you implement text in columns into the code?
At the moment, the accordion allows you to replace the text lines within a <p> tag, but I’d like to add a 3 column text, which sits within a <div> tag. Here’s the code I’d like to add:

<div class="container">
    <div class="column">
         <p>Text line 1</p>
         <p>Text line 2</p>
         <p>Text line 3</p>
   </div>
   <div class="column">
         <p>Text line 4</p>
         <p>Text line 5</p>
         <p>Text line 6</p>
   </div>
   <div class="column">
         <p>Text line 7</p>
         <p>Text line 8</p>
         <p>Text line 9</p>
   </div>
</div>

Let me know if there’s a solution. Thanks!

1 Like

Hi @Christina please find below the code to make two columns work. I’ve also included some additional options for you that might be what you you’re looking for.

PANEL 2
This panel allows for two separate columns as you had asked for.

PANEL 3
This panel keeps everything to single lines only. I’ve include an ellipse ‘…’ for text that may exceed the column width for narrow view ports or longer text -useful for when you want everything to stay on a single line such as URL links.

PANEL 4
This panel has an option for those looking to do multiple columns with run-on text like a newspaper.

The CSS style section of the code has sections showing the different effects for each panel along with some extra notes explaining some the code.

We’ve used all of these methods on our mobile site. https://headless.horse/ :slight_smile:

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

<p class="accordion">Panel 2 (seperate columns)</p>
<div class="accordion-content">
  <div class="column-panel2">
    <p>Text line 1</p>
    <p>Text line 2</p>
    <p>Text line 3</p>
  </div>
  <div class="column-panel2">
    <p>Text line 4</p>
    <p>Text line 5</p>
    <p>Text line 6</p>
  </div>
</div>

<p class="accordion">Panel 3 (seperate Columns single line with ellipsis)</p>
<div class="accordion-content">
  <div class="column-panel3">
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
  </div>
  <div class="column-panel3">
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
    <p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
  </div>
</div>

<p class="accordion">Panel 4 (multiple columns newspaper style)</p>
<div class="accordion-content">
  <p class="column-panel4">
    dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
    commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  </p>
</div>



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

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

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

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

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

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

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



  /* -------------------- PANEL 2 --------------------  */
  * {
    box-sizing: border-box;
  }

  .column-panel2 {
    float: left;
    width: 50%;
  }

  .column-panel2:last-child {
    width: 50%;
  }



  /* -------------------- PANEL 3 -------------------- */
  * {
    box-sizing: border-box;
  }

  .column-panel3>p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .column-panel3 {
    float: left;
    /* 10px is 1/2 of the margin-left value in .column:last-child to give the columns breathing room! */
    width: calc(50% - 10px);
  }

  .column-panel3:last-child {
    /* 10px is 1/2 of the margin-left value in .column:last-child to give the columns breathing room! */
    width: calc(50% - 10px);
    /* change value to match the widht calculation in .column:first-child */
    margin-left: 20px;
  }



  /* -------------------- PANEL 4 --------------------*/
  .column-panel4 {
    /* This can be any value maybe you'd like 4 columns! */
    column-count: 2;
  }
</style>



<script>
  let accordionHeading = document.querySelectorAll(".accordion");
  let 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>
1 Like

Hi @HEADLESS.HORSE

Thanks for this code! Just wondering if anyone has found a way to make the content below the accordion react to the accordion content. The content needs to be pushed down when the accordion is open, so I don’t get this overlapping issue.

Any help will be massively appreciated!

Thanks :pray:

1 Like

Hi @jemima_sandison welcome to the Readymag forum! :slight_smile:

Sadly, there isn’t a way to have a code injection element in an iFrame like this accordion to manipulate the length of a project / elements beneath. Unless you were to inject this code into the body of the project using an element’s ID to insert beneath or above?

Hello. Could you please help me? How to place a numbered list in the accordion menu? Is it possible to make the items 1, 2, 3, be on the red line.

Hi @Dmitry1 I suggest adding some ‘padding’ to the ‘.accordion-content’ class. :slight_smile: if you get stuck paste your code in your reply / link me your project, and I will add it for you.

2 Likes

I have a Free Plan, I can’t add you as a collaborator.

Here’s my code:

<p class="accordion" style="border-top: 1px solid #CCFF00;">1. Скільки часу займає проходження FLUENCY BOOST?</p>
<div class="accordion-content">
  <p>
    – Fluency Boost триває 6 тижнів.
  </p>
  <br/>
</div>

<p class="accordion">2. Чи є домашні завдання? Скільки часу потрібно, щоб його виконати?</p>
<div class="accordion-content">
  <p>
   – Домашнs завдання є, якщо ви хочете досягти успіху в англійській їх потрібно обов'язково виконувати. Ви отримаєте цікаві матеріали та домашнє завдання до них. Будете читати статі, дивитись відео та робити ефективні вправи на розвиток мовлення. Час виконнаня домашки залежить від вас, зазвичай потребує від 30 до 60 хвилин.
  </p>
<br />
</div>

<p class="accordion">3. Що таке Group Live Sessions, коли та як вони проходять?</p>
<div class="accordion-content">
  <p>
   – Group Live Sessions - це групові розмовні заняття, які тривають 90 хвилин. Саме тут ви практикуєтесь говорити виключно англійською та використовуєте матеріали, які пройшли на платформі. Що будете робити? Говорити, приймати участь у дебатах, дискусіях, діалогах. Наприкінці розмовної сессії ментор надасть фідбек стосовно помилок.
  </p>
  <br/>
</div>

<p class="accordion">4. Чи є можливість розмовляти з носіями мови?</p>
<div class="accordion-content">
  <p>
   – Так! Придбавши тариф UNLIMITED отримаєте безлімітний доступ на місяць до Conversation Clubs. Гарантуємо, це пришвидшить розвиток speaking skills та вже за 6 тижнів ви не впізнаєте свою англійську. 
  </p>
  <br/>
</div>

<p class="accordion">5. Я вже займався з репетиторами та відвідував мовні школи, але досі не вільно не розмовляю англійською. Чому з вами я заговорю?</p>
<div class="accordion-content">
  <p>
   – У ed.lang ми фокусуємось на результат. На Fluency Boost ми не просто вчимо вас англійської, ми робимо так, щоб ви впевнено використовували англійську, незважаючи який рівень маєте.
  </p>
  <br/>
   <p>
   – Як ми це робимо?
  </p>
   <br/>
   <p>
   ✔ Розробляємо цікаві матеріали, ми не використовуємо традиційні підручники.
  </p>
  
   <p>
   ✔ Надаємо різноманітні завдання, за допомогою яких ви навчитесь використовувати всі знання на практиці.
  </p>
  
   <p>
   ✔ Проводимо ефективні Group Live Sessions, де тренуєтесь розмовляти англійською спонтанно, а ментор направдяє, надає фідбек та мотивує.
  </p>
  
   <p>
   ✔ Створюємо реальні, стресові ситуації, де потрібно виходити з зони комфорту та розмовляти англійською, але не хвилюйтесь! Саме тому, ви маєте ментора, який зробить так, щоб від “стресових ситуацій” ви отримаєте насолоду та гарно попрактикуєте англійську.
  </p>
   <br/>
   <p>
     Саме на Fluency Boost ви звикнете розмовляти англійською.
  </p>
   <br/>
</div>

<p class="accordion">6. Я завершив Fluency Boost, що далі?</p>
<div class="accordion-content">
  <p>
   – Вітаємо, ви звикли розмовляти англійською. Далі будете працювати над збільшенням лексичного запасу, граматичних конструкцій та покращенням вимови.
  </p>
  <br/>
  <p>
   – High-Intermediate Speaking Course
  </p>
  <br/>
  <p>
   – 3
  </p>
  <br/>
</div>

<style>

  /* accordion title text styles */
  p.accordion {
    font-family: montserrat;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    font-weight: 700;
    color: #000000;
    font-feature-settings: "lnum"
  }

  /* accordion content text styles */
  .accordion-content p {
    font-family: montserrat;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    font-weight: 600;
    color: #000000;
    font-feature-settings: "lnum"
  }

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

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

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

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

</style>

<script>
  let accordionHeading = document.querySelectorAll(".accordion");
  let 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>

Hello, im struggling to change the font to a custom one I uploaded. does anyone have any advice?

Can you show me what attributes are needed for indents? I would be eternally grateful for your help! :slightly_smiling_face: :sparkling_heart:

Hi @gurjitbasi here is a guide on how to use your own typeface.

@Dmitry1 I have attached the revised code here for you. added “padding-left: 20px;” at the end of the style section.

<p class="accordion" style="border-top: 1px solid #CCFF00;">1. Скільки часу займає проходження FLUENCY BOOST?</p>
<div class="accordion-content">
  <p>– Fluency Boost триває 6 тижнів.</p>
  <br>
</div>

<p class="accordion">2. Чи є домашні завдання? Скільки часу потрібно, щоб його виконати?</p>
<div class="accordion-content">
  <p>– Домашнs завдання є, якщо ви хочете досягти успіху в англійській їх потрібно обов'язково виконувати. Ви отримаєте цікаві матеріали та домашнє завдання до них. Будете читати статі, дивитись відео та робити ефективні вправи на розвиток мовлення.
    Час виконнаня домашки залежить від вас, зазвичай потребує від 30 до 60 хвилин.</p>
  <br>
</div>

<p class="accordion">3. Що таке Group Live Sessions, коли та як вони проходять?</p>
<div class="accordion-content">
  <p>– Group Live Sessions - це групові розмовні заняття, які тривають 90 хвилин. Саме тут ви практикуєтесь говорити виключно англійською та використовуєте матеріали, які пройшли на платформі. Що будете робити? Говорити, приймати участь у дебатах,
    дискусіях, діалогах. Наприкінці розмовної сессії ментор надасть фідбек стосовно помилок.</p>
  <br>
</div>

<p class="accordion">4. Чи є можливість розмовляти з носіями мови?</p>
<div class="accordion-content">
  <p>– Так! Придбавши тариф UNLIMITED отримаєте безлімітний доступ на місяць до Conversation Clubs. Гарантуємо, це пришвидшить розвиток speaking skills та вже за 6 тижнів ви не впізнаєте свою англійську.</p>
  <br>
</div>

<p class="accordion">5. Я вже займався з репетиторами та відвідував мовні школи, але досі не вільно не розмовляю англійською. Чому з вами я заговорю?</p>
<div class="accordion-content">
  <p>– У ed.lang ми фокусуємось на результат. На Fluency Boost ми не просто вчимо вас англійської, ми робимо так, щоб ви впевнено використовували англійську, незважаючи який рівень маєте.</p>
  <br>
  <p>– Як ми це робимо?</p>
  <br>
  <p>✔ Розробляємо цікаві матеріали, ми не використовуємо традиційні підручники.</p>
  <p>✔ Надаємо різноманітні завдання, за допомогою яких ви навчитесь використовувати всі знання на практиці.</p>
  <p>✔ Проводимо ефективні Group Live Sessions, де тренуєтесь розмовляти англійською спонтанно, а ментор направдяє, надає фідбек та мотивує.</p>
  <p>✔ Створюємо реальні, стресові ситуації, де потрібно виходити з зони комфорту та розмовляти англійською, але не хвилюйтесь! Саме тому, ви маєте ментора, який зробить так, щоб від “стресових ситуацій” ви отримаєте насолоду та гарно попрактикуєте
    англійську.</p>
  <br>
  <p>Саме на Fluency Boost ви звикнете розмовляти англійською.</p>
  <br>
</div>

<p class="accordion">6. Я завершив Fluency Boost, що далі?</p>
<div class="accordion-content">
  <p>– Вітаємо, ви звикли розмовляти англійською. Далі будете працювати над збільшенням лексичного запасу, граматичних конструкцій та покращенням вимови.</p>
  <br>
  <p>– High-Intermediate Speaking Course</p>
  <br>
  <p>– 3</p>
  <br>
</div>

<style>
  /* accordion title text styles */
  p.accordion {
    font-family: montserrat;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    font-weight: 700;
    color: #000000;
    font-feature-settings: "lnum"
  }

  /* accordion content text styles */
  .accordion-content p {
    font-family: montserrat;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    font-weight: 600;
    color: #000000;
    font-feature-settings: "lnum"

  }

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

  .

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

  .

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

  /* accordion content box styles: default */
  .accordion-content {
    padding: 0 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    border-bottom: 1px solid #CCFF00;
    padding-left: 20px;
  }
</style>

<script>
  let accordionHeading = document.querySelectorAll(".accordion");
  let 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>
1 Like

Hi. There is a problem with displaying text in a block with custom code (questions). The first photo is the font that should be, the second is how it is displayed after publishing in the phone. Can you tell me how to change the font in mobile adaptive? Thank you !:heart:


Hi @Kateryna_Lubska can you share with us the full code injection have used for this section? It’s likely a problem with the font-family css. But we can easily resolve this.