Anhand Trapattonis legendärer Pressekonferenz von 1998, welche er mit "Ich habe fertig" beendet, erklären wir die Funktionsweise eines Akkordeons (englisch: Accordion) auf einer Webseite. Durch den Einsatz von Akkordeons können Inhalte kompakt dargestellt werden, indem sie zunächst zusammengeklappt sind und nur bei Bedarf geöffnet werden. Dadurch wird verhindert, dass eine Webseite mit langen Textblöcken oder umfangreichen Inhalten überladen wirkt und Besucher möglicherweise abschreckt. Doch es gibt auch einige Nachteile, die bei der Verwendung eines Accordions auf einer Webseite berücksichtigt werden sollten. In diesem Artikel beschränken wir uns allerdings lediglich auf die Technik.
Beispiel
Trapattoni - Was erlaube Strunz? Ich habe Fertig!
HTML (vgl. Beispiel oben):
<div class="container">
<h2>Beispiel</h2>
<div class="accordion">
<h2>Trapattoni - Was erlaube Strunz? Ich habe Fertig</h2>
<br />
<div class="tab">
<input type="checkbox" id="tab1" />
<label class="tab-label" for="tab1">Trapattoni die Erste</label>
<div class="tab-content">Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.</div>
</div>
<div class="tab">
<input type="checkbox" id="tab2" />
<label class="tab-label" for="tab2">Trapattoni die Zweite</label>
<div class="tab-content">Offensiv, offensiv ist wie machen wir in Platz. Zweitens: ich habe erklärt mit diese zwei Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni?</div>
</div>
<div class="tab">
<input type="checkbox" id="tab3" />
<label class="tab-label" for="tab3">Trapattoni die Dritte</label>
<div class="tab-content">Diese Spieler beklagen mehr als sie spielen! Wissen Sie, warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel! Haben gesagt sind nicht Spieler für die italienisch Meisters! Strunz! Strunz ist zwei Jahre hier, hat gespielt 10 Spiele, ist immer verletzt! Was erlauben Strunz? Letzte Jahre Meister Geworden mit Hamann, eh, Nerlinger. Diese Spieler waren Spieler! Waren Meister geworden! Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft in diese Verein. Muß respektieren die andere Kollegen! Muß allein die Spiel gewinnen! Ich bin müde jetzt Vater diese Spieler, eh der Verteidiger diese Spieler. Ich habe immer die Schuld über diese Spieler. Einer ist Mario, einer andere ist Mehmet! Strunz ich spreche nicht, hat gespielt nur 25 Prozent der Spiel. Ich habe fertig!</div>
</div>
</div>
</div>
CSS (vgl. Beispiel oben):
<style type="text/css">
/*<![CDATA[*/
h1 {
margin: 0;
line-height: 1;
text-align: center;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
/* Stil Akkordion (hier: mit Rahmen) */
.accordion {
border-radius: 5px;
width: 60vw;
margin: 2rem auto 0;
overflow: hidden;
padding: 2rem 2.5rem;
background-color: white;
box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.20);
}
/*Überschriften*/
.tab {
width: 100%;
color: #e54503;
overflow: hidden;
margin: 1rem 0;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1rem;
background: white;
font-weight: bold;
cursor: pointer;
}
/*Hintergrundfarbe Überschriften bei Mauskontakt*/
.tab-label:hover {
background: #f6f6f6;
}
.tab-label::after {
content: ">";
width: 1em;
height: 1em;
text-align: center;
transition: all 0.5s;
}
/*Aufgeklappter Text*/
.tab-content {
max-height: 0;
padding: 0 1em;
line-height: 2rem;
color: #444444;
background: white;
transition: all 0.35s;
}
.tab-close {
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: #f6f6f6;
cursor: pointer;
}
.tab-close:hover {
background: #e54503;
}
/*Hintergrundfarbe Überschriften, sobald aufgeklappt*/
input:checked + .tab-label {
background: #f6f6f6;
}
input:checked + .tab-label::after {
transform: rotate(90deg);
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1rem;
}
/*]]>*/
</style>