信任徽章 html css 和脚本

Question

我正在尝试在我的商店上进行定制徽章。我想拥有4个具有“快速运输”之类的信息。单击其中一个时，一个小的描述性文本将在下面显示。

现在，我的问题是，我找不到将＆lt; p＆gt;设置为宽度100％的方法当不按下时不好）

有人可以给我有关如何执行此操作的提示吗？ ＆lt; 3我没有想法，

这是我的代码，谢谢！

var acc = document.getElementsByClassName("accordion-2");
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-2 {
  background-color: rgb(255, 255, 255);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 49%;
  float: left;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.164);
  text-align: left;
  outline: none;
  font-size: 15px;
  font-style: italic;
  transition: 0.2s;
}

.active,
.accordion-2:hover {
  background-color: rgb(212, 245, 255);
}

.accordion-2-guld:hover {
  background-color: rgb(236, 185, 45);
}

.accordion-2:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

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

.panel:after {
  float: left;
}

<button class="accordion-2">Gratis frakt</button>
<div class="panel">
  <p>Gratis | Postnord Hemleverans 3-5 dagar.<br><br>49kr | Skickas samma dag eller dagen efter. 1-2 arbetsdagar.<br><br>57kr | Utlämningsställe</p>
</div>

<button class="accordion-2">Enkel retur</button>
<div class="panel">
  <p>Byta storlek eller färg? Inga problem! <br><br> Du står för frakten till oss och vi skickar gratis tillbaka nya produkter!</p>
</div>

<button class="accordion-2">Fin paketbox</button>
<div class="panel">
  <p>Varje smycke kommer fint paketerad i våra fina askar och läderpåsar. De kommer i vit eller svart och olika storlekar. Vi ser till att paketet passar just din beställning 
              

Answer 1

2列和描述在每列内部的按钮下。

使用CSS网格。

将您的按钮和.panel包装到.column中。使用CSS网格在40％中显示2列。
删除float：从您的按钮中左，并设置width：100％到您的按钮。

var acc = document.getElementsByClassName("accordion-2");
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-columns::after {
    clear: both;
    content: '';
}
.accordion-columns {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, 49%);
    justify-items: stretch;
}

.accordion-2 {
    background-color: rgb(255, 255, 255);
    color: #444;
    cursor: pointer;
    padding: 18px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.164);
    text-align: left;
    outline: none;
    font-size: 15px;
    font-style: italic;
    transition: 0.2s;
    width: 100%;
}

.active,
.accordion-2:hover {
    background-color: rgb(212, 245, 255);
}

.accordion-2-guld:hover {
    background-color: rgb(236, 185, 45);
}

.accordion-2:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

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

.panel:after {
    float: left;
}

<div class="accordion-columns">

    <div class="column">

        <button class="accordion-2">Gratis frakt</button>

        <div class="panel">

            <p>Gratis | Postnord Hemleverans 3-5 dagar.<br><br>49kr | Skickas samma dag eller dagen efter. 1-2 arbetsdagar.<br><br>57kr | Utlämningsställe</p>

        </div>

    </div>

    <div class="column">

        <button class="accordion-2">Enkel retur</button>

        <div class="panel">

            <p>Byta storlek eller färg? Inga problem! <br><br> Du står för frakten till oss och vi skickar gratis tillbaka nya produkter!</p>

        </div>

    </div>
    <div class="column">

        <button class="accordion-2">Fin paketbox</button>

        <div class="panel">

            <p>Varje smycke kommer fint paketerad i våra fina askar och läderpåsar. De kommer i vit eller svart och olika storlekar. Vi ser till att paketet passar just din beställning