Wusstet ihr das man auch ohne Javascript ein schönes Accordion System in seine Webseite einbauen kann? Ja genau, HTML Hat ein Accordion Befehl und in diesem Video zeige ich euch wie ihr das verwenden könnt.

Was ist überhaupt ein Accordion? Genau ihr kennt das Instrument das so heisst, in Deutschland ist das ja glaub eine Ziehharmonika und in der Schweiz sagen wir es Handörgeli. Genau da macht man mit den Hände so auf und zu bewegungen, und du hast Tasten wie bei einem Klavier um Musik zu machen und Knöpfe die auch noch was tun… sry ich kann das Ding nicht spielen darum ist meine Erklärung wo vielleicht evtl ein wenig daneben 🙂

Egal – zurück zum Thema

Ein Accordion im Webdesign ist ein Element das man auf und zu klappen kann. Meistens sind sogar mehrere solcher Elemente gleich nacheinander oder nebeneinander. Mit einem Klick auf den Titel oder dem Icon kann man ein anderes Element verstecken oder anzeigen lassen.

Nun man muss nicht einmal mehr gross Javascript verwenden, sondern es geht auch mit reinem HTML und ein wenig CSS fürs design.

Und heute möchte ich euch diesen fast vergessenen HTML vorstellen

Video

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 <details>
      <summary>Titel1</summary>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
        labore?
      </p>
    </details>
    <details>
      <summary>Titel2</summary>
      <p>
        Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
        labore?
      </p>
    </details>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 summary {
        color: rebeccapurple;
        font-size: 30px;
      }
      summary::marker {
        color: deeppink;
      }
      summary::-webkit-details-marker {
        color: deeppink;
      }
 
      p {
        font-size: 25px;
        color: coral;
        background-color: #333;
      }