Accordion einfach in Gambio integriert

Zuletzt geändert am von kai.s.

Einfacher geht es mittlerweile nicht mehr ein Accordion in seinen Gambio Shop oder jede andere Webseite einzubauen. Ihr benötigt nur ein klein wenig Code, mehr nicht. Das ist eigentlich schon alles.

<details>
   <summary>Die Überschrift, oder das was vor dem Aufklappen zu sehen ist</summary>
   <p>Hier der Text der nach dem Aufklappen zu sehen sein soll.</p>
</details>

Das ganze sieht dann so aus wenn es ausgegeben wird.

Die Überschrift, oder das was vor dem Aufklappen zu sehen ist

Hier der Text der nach dem Aufklappen zu sehen sein soll.

Damit das ganze dann auch noch etwas schöner aussieht, kann man auch noch etwas CSS hinzufügen. Das zeige ich zum Schluss. Ob man das in Form von Styles im HTML Code macht, oder es als zusätzliches CSS in seine Webseite einfügt, muss man sehen. Möchten Sie das Ihre Accordion immer gleich aussehen, macht es Sinn, die Styles im Gambio in den StyleEditor zu packen. Was man immer machen sollte, dem Besucher zeigen, das da was anklickbar ist.

<details>
   <summary style="cursor:pointer">Die Überschrift, oder das was vor dem Aufklappen zu sehen ist</summary>
   <p>Hier der Text der nach dem Aufklappen zu sehen sein soll.</p>
</details>

Das ganze sieht dann so aus:

Die Überschrift, oder das was vor dem Aufklappen zu sehen ist

Hier der Text der nach dem Aufklappen zu sehen sein soll.

Fahrt jetzt mal mit der Maus über die Überschrift, jetzt sollte man sehen, das es ein anklickbarer Link ist. Um das für alle zu übernehmen, könnt Ihr den Code so verwenden, oder ihr kopiert den Code hier darunter in den Gambio StyleEditor und benutzt den von oben, bei sehr vielen Accordions spart Ihr Euch eine Menge Code.

summery {
cursor:pointer;
}

Damit das ganze dann auch ein richtiges Accordion wird, gehören da ja noch paar mehr Sachen rein.

Die Überschrift Eins

Hier der erste Text.

Die Überschrift Zwei

Hier der zweite Text.

Die Überschrift Drei

Hier der dritte Text.

Der Code Dazu sieht dann so aus:

<details>
   <summary style="cursor:pointer">Die Überschrift Eins</summary>
   <p>Hier der erste Text.</p>
</details>
<details>
   <summary style="cursor:pointer">Die Überschrift Zwei</summary>
   <p>Hier der zweite Text.</p>
</details>
<details>
   <summary style="cursor:pointer">Die Überschrift Drei</summary>
   <p>Hier der dritte Text.</p>
</details>

Das Design anpassen, da sind der Phantasie keine Grenzen gesetzt

Die Überschrift Eins

Hier der erste Text.

Die Überschrift Zwei

Hier der zweite Text.

Die Überschrift Drei

Hier der dritte Text.

Was das Design angeht kann man sich austoben bis zum geht nicht mehr. z.B. könnte man den Hintergrund noch Farbig machen, Die Schriftfarbe ändern oder was auch immer. Was im Gambio nicht angezeigt wird, sind die kleinen Dreiecke vor der Überschrift, dafür gebe ich Euch aber noch was, was Ihr ganz einfach in den StyleEditor kopieren könnt. Hier erst mal der Code für jede x beliebige Webseite.

<details style="border:1px solid #abb8c3;border-radius:6px;margin-bottom:10px;">
   <summary style="cursor:pointer; margin-left:5px;">Die Überschrift Eins</summary>
   <p style="margin-left:15px;">Hier der erste Text.</p>
</details>
<details style="border:1px solid #abb8c3;border-radius:6px; margin-bottom:10px;">
   <summary style="cursor:pointer; margin-left:5px;">Die Überschrift Zwei</summary>
   <p style="margin-left:15px;">Hier der zweite Text.</p>
</details>
<details style="border:1px solid #abb8c3;border-radius:6px; margin-bottom:10px;">
   <summary style="cursor:pointer; margin-left:5px;">Die Überschrift Drei</summary>
   <p style="margin-left:15px;">Hier der dritte Text.</p>
</details>

Ab hier ist das Accordion für Gambio kleinere Anpassungen dann weiter unten

Den Teil in den Content kopieren. Achtet immer darauf, vorher auf den HTML Modus zu wechseln.

<details class="details">
   <summary class="summary">Die Überschrift Eins</summary>
   <p class="summaryp">Hier der erste Text.</p>
</details>
<details class="details">
   <summary class="summary">Die Überschrift Zwei</summary>
   <p class="summaryp">Hier der zweite Text.</p>
</details>
<details class="details">
   <summary class="summary">Die Überschrift Drei</summary>
   <p class="summaryp">Hier der dritte Text.</p>
</details>

Den Teil in den StyleEditor unter eigenes CSS kopieren. Es ist bereits jedem Bereich ein Klasse zugeordnet, Ihr könnt also jeden Bereich separat noch für Eure Zwecke umschreiben.

.details{
border:1px solid #abb8c3;
border-radius:6px;
margin-bottom:10px;
}

.summary::before {
  content: "▶";
  margin-right:5px;
}

details[open] summary::before {
   content: '▼ ';
}

.summary{
cursor:pointer;
margin-left:5px;
margin-top: 5px;
margin-bottom: 5px;
}

.summaryp {
margin-left:27px;
}

Ab hier kleinere Anpassungen für alle

Wer statt dem Dreieck z.B. ein Plus und ein Minus Zeichen haben möchte, könnten in seinem CSS Code das so anpassen.

.summary::before {
  content: "+";
  margin-right:5px;
}

details[open] summary::before {
   content: '- ';
}

Wer möchte, der kann auch einen Bereich bereits offen darstellen also so:

Die Überschrift Eins

Hier der erste Text.

Die Überschrift Zwei

Hier der zweite Text.

Die Überschrift Drei

Hier der dritte Text.

Dazu muss man nur das im HTML Code einfügen.

<details open="">

Wie bereits erwähnt gibt es viele viele Möglichkeiten das auch anders aussehen zu lassen.

Ich hoffe ich konnte Euch ein wenig zeigen was heutzutage alles ohne viel Aufwand möglich ist. Gern erstellen wir für Euch auch individuelle Designs für Euren Onlineshop, meldet Euch einfach.