信任徽章 html css 和脚本

Question

我正在尝试在我的商店中制作自定义徽章。我想要 4 个包含“快速发货”等信息的对象。单击其中一个时，下方会显示一小段描述性文字。

现在，我的问题是我无法找到一种方法来仅在活动时将 <p> 的宽度设置为 100%，而不是始终将其设置为 100%（这会使它看起来很糟糕未按下时）

有人可以告诉我如何做到这一点吗？ <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: '[=13=]2B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "12";
}

.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  Har du ett speciellt önskemål är det bara att lägga en liten kommentar vi utcheckning,
    så löser vi det!</p>
</div>

<button class="accordion-2">Betala efter 30 dagar med Klarna</button>
<div class="panel">
  <p>Vi erbjuder Klarna betalning, Swish &amp; Kortbetlaning.</p>
</div>

Answer 1

2 列，说明位于每列内的按钮下方。

使用CSS网格。

将您的 button 和 .panel 包装成 .column。使用 CSS 网格显示 2 列，每列 40%。
从 button 中删除 float: left 并将 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: '[=11=]2B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "12";
}

.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  Har du ett speciellt önskemål är det bara att lägga en liten kommentar vi utcheckning,
                så löser vi det!</p>
        </div>
    </div>

    <div class="column">
        <button class="accordion-2">Betala efter 30 dagar med Klarna</button>
        <div class="panel">
            <p>Vi erbjuder Klarna betalning, Swish &amp; Kortbetlaning.</p>
        </div>
    </div>
</div>

现在您将有 2 列，每列内的按钮下方都有描述。
在 jsfiddle.

上查看

要有 2 列，但在活动时，全宽显示 .panel。

使用与上面相同的 CSS 网格，但在 JS 中将 .active class 添加到 .column。修改 .accordion-columns .column.active CSS 以第 1 列开始并在末尾结束。
修改您的 CSS 以正确显示 + 和 -。

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    this.closest('.column').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: [first] 49% [second] 49% [end];
    justify-items: stretch;
}
.accordion-columns .column.active {
    grid-column-start: 1;
    grid-column-end: end;
}

.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%;
}


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

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

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

.accordion-2.active:after {
    content: "12";
}

.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  Har du ett speciellt önskemål är det bara att lägga en liten kommentar vi utcheckning,
                så löser vi det!</p>
        </div>
    </div>

    <div class="column">
        <button class="accordion-2">Betala efter 30 dagar med Klarna</button>
        <div class="panel">
            <p>Vi erbjuder Klarna betalning, Swish &amp; Kortbetlaning.</p>
        </div>
    </div>
</div>

在 jsfiddle 上查看。

信任徽章 html css 和脚本

Trust badges html css and script

html

css

badge