Trust badges html css and script

Question

I am trying to do custom badges on my store. I want to have 4 objects with info like "fast shipping". When clicking on one of them, a small descriptive text will show just underneath.

Now, my problem is that I can't find a way to set the <p> to width 100% only when active, without putting it 100% all the time (which will make it all look bad when not pressed)

Can someone give me tips on how to do this? <3 I am out of ideas hahah

Here is my code, thanks!

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 columns and description is under the button inside each column.

Use CSS grid.

Wrap your button and .panel into a .column. Use CSS grid to display 2 columns at 40% each.
Remove float: left from your button and set width: 100% to your button.

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>

Now you will have 2 columns with description under the button inside each column.
See it on jsfiddle.

---

To have 2 columns but when active, display .panel in full width.

Use the same CSS grid as above but add .active class to .column in JS. Modify .accordion-columns .column.active CSS to start and column 1 and end at the end.
Modify your CSS to display + and - correctly.

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>

See it on jsfiddle.