How to add accordion/toggle on specific product page?

Hi everyone! I've been trying to find how to add a toggle/accordion on my products page as my ingredient list is a little long & not very appealing on the eye. There doesn't seem to be much flexibility when it comes to adding various features to the product pages so I will need to learn how to code properly at some point. For now, I've attached an image below of what I'm looking for, hopefully someone can help:) Thank you!

A good spot to dabble with code is w3schools.com. That is where I started. You can see how a basic accordion is coded here: https://www.w3schools.com/howto/howto_js_accordion.asp . I have also gone ahead and taken this example and set it up in the style you are looking for hope this helps. Just copy and past this code in a code block.

<style>
.custom-accordion {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-left: none;
  border-right: none;
  background-color: white;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
 margin: 5px 0;
}

.custom-accordion span {

  color: #414344;
  padding-left: 10px;
  font-size: 17px;

}

.custom-active, .custom-accordion:hover {
  background-color: white;
}

.custom-accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.custom-active:after {
  content: "\2212";
}

.custom-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<button class="custom-accordion">01<span>Who It's For</span></button>
<div class="custom-panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="custom-accordion">02<span>How To Use</span></button>
<div class="custom-panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="custom-accordion">03<span>Ingredients</span></button>
<div class="custom-panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="custom-accordion">04<span>Why Subscribe</span></button>
<div class="custom-panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dui vivamus arcu felis bibendum ut tristique et. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Leo vel fringilla est ullamcorper eget. Augue ut lectus arcu bibendum. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Nunc lobortis mattis aliquam faucibus. Urna molestie at elementum eu facilisis sed. Turpis egestas maecenas pharetra convallis posuere morbi leo. At urna condimentum mattis pellentesque id nibh.
</p>

<script>
var acc = document.getElementsByClassName("custom-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("custom-active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

On 1/19/2023 at 10:27 PM, Linajanuleviic said:

Hi everyone! I've been trying to find how to add a toggle/accordion on my products page as my ingredient list is a little long & not very appealing on the eye. There doesn't seem to be much flexibility when it comes to adding various features to the product pages so I will need to learn how to code properly at some point. For now, I've attached an image below of what I'm looking for, hopefully someone can help:) Thank you!

Hi,

You can edit Additional Info > Add an Accordion Block to achieve this