Use H6 Tags To Pull Part Of Description Down To Accordion In HTML Block Lower Down The Page

26 February 2021 - 1 answer

So, I tried to get the gist of what I'm trying to do in the title, but essentially, I made accordions for our product page and I'm trying to get them to pull some bullet points from the description so that it's different depending on which product page you're on.

I know there are apps that can make tabs and accordions, but once I have the code right, I need to duplicate the product template so that we can apply them to different collections so the images and information on the pages match with the products.

The code attached is in an HTML block on the product page itself and not in the backend code of the store.

Any help is appreciated. Thanks!

var acc = document.getElementsByClassName("accordion");
var i;

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

.accordion {
  background-color: #fff;
  color: inherit;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  text-align: left;
  outline: none;
  font-size: inherit;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #fafafa;
}

.accordion::after {
  content: '\22C1';
  color: #777;
  font-weight: inherit;
  float: right;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  
}

.active::after {
  content: '\22C1';
  transform: rotate(-180deg);
  transition: transform 0.2s ease;
}

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

<button class="accordion">Key Features</button>
<div class="panel">
  <p></p>
<ul>
<li>Women’s pullover hooded sweatshirt</li>
<li>Sublimated comfort Kangaroo pouch pocket.</li>
<li>Ultra-soft comfort and lightweight warmth.</li>
<li>Drawstrings for hood sizing.</li>
<li>Screen printed neck label for comfort.</li>
<li>60% polyester, 35% rayon, 5% spandex.</li>
<li>Machine wash cold, tumble dry low, wash inside-out</li>
</ul>
</div>

<button class="accordion">Sizing</button>
<div class="panel">
  <img src="" width="100%"><br>Sizing images will go here.<img src="" width="100%">
</div>

Answer

Let's say that in product.description there is an h6 tag that you want to pull out.

I will find that the ending </h6> and split it out an array which the first part will have <h6. Then get the content of h6 with another split. send the content to the accordion.

e.g. code is not tested.

{% assign items = product.description | split: "</h6>" %}
{% assign items = items[0] | split: "<h6" %}
{% assign items = items[1] | split: ">" %}
{% assign content = items[1] %}

<button class="accordion">Key Features</button>
<div class="panel">
 {% if content %}
  <h6>{{content | escape}}</h6>
 {% endif %}
</div>

source: stackoverflow.com

← Previous Post

Use H6 Tags To Pull Part Of Description Down To Accordion In HTML Block Lower Down The Page

26 February 2021 - 1 answer

Answer

Related Questions