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

Question

所以，我试图在标题中了解我想要做的事情的要点，但本质上，我为我们的产品页面制作了手风琴，我试图让他们从描述，以便它根据您所在的产品页面而有所不同。

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

附加的代码在产品页面本身的 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: 'C1';
  color: #777;
  font-weight: inherit;
  float: right;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  
}

.active::after {
  content: 'C1';
  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>

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

Use H6 tags to pull part of description down to accordion in HTML block lower down the page

html

javascript

css

liquid

shopify