UCTEKVEJLGRID: Accordion med tekst knapper

Collapsible Group 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 2

Collapsible Group 3

Kode til kopiering (Bootstrap 5):

<div id="accordion" class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h4 class="accordion-title">
        <a class="" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" style="color: #3f5b58; text-decoration: none;">
          Collapsible Group 1
        </a>
      </h4>
    </div>
    <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#accordion">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h4 class="accordion-title">
        <a class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" style="color: #3f5b58; text-decoration: none;">
          Collapsible Group 2
        </a>
      </h4>
    </div>
    <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#accordion">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h4 class="accordion-title">
        <a class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" style="color: #3f5b58; text-decoration: none;">
          Collapsible Group 3
        </a>
      </h4>
    </div>
    <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#accordion">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
</div>

Farvejustering:

For at sikre, at kun én tekstgruppe er foldet ud ad gangen, skal data-bs-parent="#accordion" være til stede på alle accordion-collapse-elementer. Dette sikrer, at Bootstrap 5 håndterer lukning af de øvrige elementer automatisk.

For at ændre farven på tekstlinksene, erstat #3f5b58 i style="color: #3f5b58;" med din foretrukne hex-farvekode (fx #007bff for blå).

Eksempel:

<a style="color: #007bff; text-decoration: none;">Collapsible Group 1</a>

آخر تعديل: الثلاثاء، 8 سبتمبر 2026، 4:34 PM