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

New Member
3 0 3

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!


.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">
<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>

<button class="accordion">Sizing</button>
<div class="panel">
  <img src="" width="100%"><img src="" width="100%">

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

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



Replies 2 (2)
26 0 10

Hey! Did you ever figure this out?

Shopify Partner
25090 2510 9074


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Partner | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing