18. März 2023

Accordion mit jQuery

Accordions sind ein beliebtes UI-Element im Webdesign. Um ein Accordion zu erstellen kann man auf jede Menge WordPress- oder jQuery-Plugins zurückgreifen. Das ist aus meiner Sicht aber eigentlich gar nicht nötig, da man ein Accordion mit ein paar Zeilen Code selbst erstellen kann und somit auch die volle Kontrolle über Design & Funktionalität hat.

So soll das ganze aussehen:

Ein bisschen HTML:

<div class="acc_item">
  <div class="acc_btn">Lorem ipsum</div>
  <div class="acc_content">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
  </div>
</div>

Etwas CSS:

.acc_item {
    border-bottom: 1px solid #ccc;
    padding: 17px 0;
}

.acc_btn {
    cursor: pointer;
    padding: 4px 15px 4px 0;
}

.acc_btn:after {
    font-family: 'FontAwesome';
    content: "\f067";
    position: absolute;
    top: 3px;
    right: 5px;
}

.acc_btn.active:after {
    content: "\f068";
}

.acc_content {
    padding-top: 12px;
    display: none;
}

… und 3 Zeilen jQuery.

$('.acc_btn').bind('click', function(){
    $(this).next().slideToggle(200);
    $(this).toggleClass('active');
});

Fertig.

Um Accordions auch als Block im Gutenberg-Editor in WordPress verwenden zu können, nutze ich das Plugin „Lazy Blocks“. Hierzu müssen einfach 2 Content Control (Titel & Content) und folgender Code hinzugefügt werden:

<div class="acc_item">
  <div class="acc_btn">
  {{{titel}}}
  </div>
  <div class="acc_content">
  {{{content}}}
  </div>
</div>