CSS/Anwendung und Praxis/Akkordeon

Aus SELFHTML-Wiki
< CSS‎ | Anwendung und Praxis(Weitergeleitet von Accordion)
Wechseln zu: Navigation, Suche

Unter einem Akkordeon (engl. accordion) versteht man einen Aufklappmechanismus, der nur einen Teilbereich der Seite darstellt und erst durch die Interaktion des Benutzers (click oder touch) weitere Teilbereiche aufschiebt und somit sichtbar macht.

Im Internet gibt es viele Tutorials, die dies mit JavaScript oder gar jQuery realisieren, wir stellen Ihnen hier zwei Methoden vor, mit denen Sie dies nur mit CSS erreichen.

Beachten Sie: Bevor Sie diese Technik auf Ihrer Webseite übernehmen, sollten Sie sich aber über die Nachteile eines Akkordeons im Klaren sein:
  • Inhalte sind nicht sofort ersichtlich und (mindestens) einen Klick oder Wischer vom Nutzer Ihrer Seite entfernt.
  • Viele Nutzer verlassen die Seite vorher.
  • Diese Beispiele sind nicht zugänglich. Benutzer, die ohne Maus auskommen müssen, können sie nicht mit der Tastatur bedienen.

Eine zugängliche Alternative mit JavaScript finden Sie unter: JavaScript/Anwendung und Praxis/zugängliches Akkordeon.

Akkordeon mit :target-Mechanismus[Bearbeiten]

HTML-Grundstruktur[Bearbeiten]

Beispiel ansehen …
  <div class="akkordeon">
    <a href="#accord1">Klick mich!</a>
    <p id="accord1">Dieser Text ist normalerweise unsichtbar, ...</p>
    <a href="#accord2">Mich auch!</a>
    <p id="accord2">Dieser Text ist normalerweise unsichtbar, ...</p>
    <a href="#accord3">Akkordeon</a>
    <p id="accord3">Die Überschrift ist ein Link, der den ihm folgenden Absatz verweist. 
       Über das Pseudoelement :target wird beim Anspringen eines Absatzes ...
   </p>
  </div>
Das Akkordeon besteht aus Verweisen, die auf einen internen Anker verweisen. Der jeweils folgende Absatz hat eine entsprechende id.


CSS-Styling[Bearbeiten]

Beispiel ansehen …
.akkordeon {
  width: 20em;
  padding: 0.2em; 
  background: white;
  border: 1px solid #8a9da8;
}

.akkordeon > a {
  background: black;
  color: white;
  display: block;
  margin-bottom: 0.2em;
  padding: 0.2em;
  text-decoration: none;
}

.akkordeon p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
  padding: 0 0.2em;
  margin: 0;	
}
Die Verweise erhalten eine Farbinvertierung und text-decoration: none; damit sie als Überschriften erkennbar sind. Die Absätze haben eine maximale Höhe von 0;

Der :target-Pseudoselektor[Bearbeiten]

Beispiel ansehen …
.akkordeon p {
  max-height: 0;
  transition: max-height 1s;
  ...
}

.akkordeon p:target {
  max-height: 7em;
  transition-delay: 0s;
}
Da es im CSS kein click-Event gibt, können Sie stattdessen den target-Pseudoselektor verwenden. Sobald ein Absatz durch einen Klick oder Tap auf den entsprechenden Verweis als Ziel (target) aktiviert ist, ändert sich die (maximale) Höhe des Absatzes und der Text wird, gedämpft durch transition innerhalb einer Sekunde ausgefahren.

horizontale Ausrichtung[Bearbeiten]

Akkordeon mit versteckten Checkboxen[Bearbeiten]

Der Nachteil des Auswählens mit :target ist die fehlende Möglichkeit eines Resets bzw. einer Mehrfachauswahl; selbst bei einem Neuladen der Seite bleibt die (letzte getroffene) Auswahl erhalten.

Der Checkbox-Hack ist ein Trick, mit dem man Elemente mit versteckten Checkboxen beliebig öffnen oder schließen. Falls nur ein Element gleichzeitig geöffnet werden soll, können Sie alternativ auch Radio-Buttons verwenden.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

HTML-Grundstruktur[Bearbeiten]

Beispiel ansehen …
  <div class="akkordeon">
    <div>
      <input id="ac-1" name="akkordeon-1" type="checkbox" />
      <label for="ac-1">Klick mich!</label>
      <p>Dieser Text ist normalerweise unsichtbar, ... </p>
    </div>
    <div>
      <input id="ac-2" name="akkordeon-1" type="checkbox" />
      <label for="ac-2">Mich auch!</label>
      <p>Dieser Text ist normalerweise unsichtbar, ...</p>
    </div>
    <div>
      <input id="ac-3" name="akkordeon-1" type="checkbox" checked/>
      <label for="ac-3">Akkordeon</label>
      <p>Die Überschrift ist ein Label für einen Radio-Button. 
          Wenn er angeklickt wird, wird die Höhe des folgenden Absatzes geändert.
      </p>
     </div> 
  </div>
Der Aufbau ähnelt dem vorherigen Beispiel; anstelle des Links verwenden Sie ein input type="checkbox"-Element, das von einem label mit einer Erklärung gefolgt wird.
Die dritte Checkbox ist mit dem booleschen Attribut checked schon angewählt.
Beachten Sie: Die ID des input-Elements muss dem Wert des for-Attribut des label-Elements entsprechen.

CSS[Bearbeiten]

sichtbare Checkboxen[Bearbeiten]

Das CSS folgt dem ersten Beispiel oben:

Beispiel ansehen …
.akkordeon {
  width: 20em;
  padding: 0.2em; 
  background: white;
  border: 1px solid #8a9da8;
}

.akkordeon label{
  padding: 0.2em 1em;
  margin-bottom: 0.2em;
  position: relative;
  display: block;
  height: 1.5em;
  cursor: pointer;
  background: black;
  color: white;
}
.akkordeon label:hover{
  background: lime;
  color: black;
}
.akkordeon input + label {
  transition: all 0.5s ease-in-out;
}
.akkordeon input:checked + label,
.akkordeon input:checked + label:hover{
  background: #5a9900;
}

.akkordeon p {
  overflow: hidden;
  height: 0;
  margin: 0;
  transition: all 0.5s ease-in-out;
}

.akkordeon input:checked ~ p{
  transition: all 0.5s ease-in-out;
  height: 7em;
}
In diesem Beispiel sind die Checkboxen sichtbar.
Die label-Elemente werden als Überschriften gestaltet, die sich bei :hover oder Anwählen verändern. Dabei wird der Pseudoselektor checked für die Festlegung der Darstellung verwendet.

Der Textabsatz hat im Normalzustand für Höhe und Rand den Wert 0. Erst wenn das Geschwister-Element input ausgewählt wird, wird die Höhe über den Geschwisterselektor .akkordeon input:checked ~ p geändert.

Damit sich die Zustände nicht zu abrupt ändern, wird mit transition: all 0.5s ease-in-out; ein weicher Übergang erreicht.

versteckte Radio-buttons[Bearbeiten]

Beispiel ansehen …
.akkordeon {
  width: 20em;
  padding: 0.2em; 
  background: white;
  border: 1px solid #8a9da8;
}

.akkordeon label{
  padding: 0.2em 1em;
  margin-bottom: 0.2em;
  position: relative;
  display: block;
  height: 1.5em;
  cursor: pointer;
  background: black;
  color: white;
}
.akkordeon label:hover{
  background: lime;
  color: black;
}
.akkordeon input + label {
  transition: all 0.5s ease-in-out;
}
.akkordeon input:checked + label,
.akkordeon input:checked + label:hover{
  background: #5a9900;
}

.akkordeon input{
	display: none;
}

.akkordeon p {
  overflow: hidden;
  height: 0;
  margin: 0;
  transition: all 0.5s ease-in-out;
}

.akkordeon input:checked ~ p{
  transition: all 0.5s ease-in-out;
  height: 7em;
}
In diesem Beispiel sind anstelle der Checkboxen Radio-Buttons verwendet worden, die aber durch display: none; nicht sichtbar sind.
Hierdurch erhält das Akkordeons eine feste Höhe, die sich auch durch das Auswählen einzelner Abschnitte nicht ändert.

Fazit[Bearbeiten]

Es wurden zwei Modelle vorgestellt, mit denen Sie nur mit CSS Inhalte auf- und zuklappen können. Allerdings lassen sich diese nicht mit der Tastatur bedienen. Eine zugängliche Alternative stellt Heydon Pickering hier vor. Diese erfordert allerdings den Einsatz von JavaScript.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]