Use H6 tags to pull text from description to Accordion (Impulse Theme 3.6.2)

SwelloWeb
New Member
3 0 2

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!

<body>

<style>
.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;
}
</style>


<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="https://cdn.shopify.com/s/files/1/0323/0713/files/Screen_Shot_2021-02-25_at_4.45.11_PM.png?v=1614296785" width="100%"><img src="https://cdn.shopify.com/s/files/1/0323/0713/files/Screen_Shot_2021-02-25_at_4.46.06_PM.png?v=1614296785" width="100%">
</div>


<script>
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";
    } 
  });
}
</script>



</body>

 

0 Likes