使用H6标签将部分描述拉到页面下方的HTML块中的手风琴

Question

所以，我试着在标题中得到要点，但本质上，我为我们的产品页面做了手风琴，我试着让它们从描述中提取一些项目符号，这样它就会根据你在哪个产品页面上有所不同。

我知道有一些应用程序可以制作选项卡和手风琴，但是一旦我有正确的代码，我需要复制产品模板，以便我们可以将它们应用到不同的集合，以便页面上的图像和信息与产品匹配。

附加的代码在产品页面本身的HTML块中，而不是在商店的后端代码中。

任何帮助都是感激的。谢谢!

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 1

假设在product.description中有一个h6标签，您想要将其拉出。

我将找到结尾的</h6>并将其拆分为一个数组，其中第一部分将具有<h6。然后用另一个分裂获得h6的内容。将内容发送到手风琴

。代码未被测试

{% 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>