信任徽章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: '\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  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网格在每个40%上显示2列。

从float: left中删除button并将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  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列，但活动时，显示.panel的全宽度。

使用上面相同的CSS网格，但在JS中将.active类添加到.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: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion-2.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  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>

​

请在小提琴上看到。