Akkordeon sinnvoll stylen

Hallo,

ich zerbreche mir gerade den Kopf, wie ich ein Akkordeon so style, dass es sich dem Besucher ohne Erklärung erschließt wie es funktioniert und sich auch ins Design der Seite einfügt.

Zielgruppe: 40+

Die Seite: https://www.bergischer24stundenlauf.de/geschichte.html

Freue mich über jede Idee.

Neelix

Ich mache das normalerweise so, wie im Contao-Backend z.B. bei der Dateiverwaltung, also mit + und - Symbol.

Welche Schriftart nimmst Du denn für die Symbole?

das geht relativ easy mit css:

Code:

---

.toggler.active::before {
    content: "+";
}
.toggler::before {
    content: "-";
}

---

Ja, das CSS ist nicht das Problem.

Mein Problem ist die Optik und das die Leute die Überschriften nicht anklicken. Ich bekomme dann immer die Frage "Wo sind denn die alten Ergebnisse" und muss dann erklären, dass man den Text anklicken muss, damit die Tabelle ausklappt.

Und da suche ich halt eine optische Lösung, die das begreiflich macht.

Ich habe jetzt mal die simplen "+,-" genommen, aber es sieht halt aus wie eine Aufzählung ohne Inhalt.

z.B. so: https://codepen.io/raubaca/pen/PZzpVe


Gesendet von iPhone mit Tapatalk

könnte vielleicht klappen. Mal schauen, wie das ins Contao CSS passt.

Hm, das Toogle-Div hat einen Inline-Style. Wo kommt der her?

EDIT: OK, gefunden. Jetzt muss ich noch schauen, wie ich die Tabelle etwas eingerückt bekomme. Da ist auch ein Inline-CSS...

Hm, für deine Zielgruppe würde ich die Doppelpfeile durch die Worte "einblenden" und "ausblenden" ersetzen.

Das sieht dann ja direkt aus wie für Blöde.

Ich probier's mal so.

Hast Du eine Idee, wo das Inline-CSS für das Div herkommen könnte?

Zitat:

---

Das sieht dann ja direkt aus wie für Blöde.

---

Nein, es beschreibt die Funktion des Akkordeons, und damit lediglich was passiert, wenn ein bestimmter Bereich geklickt wird. Das ist eine hilfreiche Information für all die Besucher, die noch nicht erfahren haben wie ein Akkordeon funktioniert und häufig ausgezeichnet wird. Ob diese Besucher deswegen blöde sind ...?

Ich habe da einen Pfeil gemacht der nach unten zeigt. Wenn man den "Hovert" hüpft er animiert leicht nach unten. Wenn geklickt wird, dreht sich der Pfeil nach oben.

@Googlebug: Wie lässt du den hüpfen?

Ich hat auch schon überlegt, ob ich da irgendwie ein Tooltip generieren kann mit einem Hinweis "Zum Einblenden klicken".

Zitat:

---

Zitat von neelix

@Googlebug: Wie lässt du den hüpfen?

Ich hat auch schon überlegt, ob ich da irgendwie ein Tooltip generieren kann mit einem Hinweis "Zum Einblenden klicken".

---

Code:

---


#deinID:hover {
Transform: translateX(-4em);
    animation-name: bounce;
    animation-timing-function: ease-in;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#deinID:hover:before {
content:"bitte klicken oder so";
}

---

den Tooltip kannst du dann freilich noch designen mit "border" blubs etc.

Kannst auch mal hier schauen: https://www.b2b-web.de/sebbb/

da siehst du unten links den Pfeil hüpfen. Musst du dann wie oben beschrieben nur bei :hover machen. :cool:

Hallo,

ich persönlich nutze die umrandeten + und - Icons von Feathericons (sollte dadurch auch intuitiv sein?!), dazu hab ich mir die Templates für News und Events zum Akkordeon umgeschrieben: click me
CSS dazu:

Code:

---

/* Akkordeon Inhalt */
.accordion {
    padding-left:2em;
}

/* Akkordeon Toggler */
.toggler {
    padding-left:2em;
    vertical-align:middle;
    background-image:url("files/layout/svg_icons/plus-square.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
    cursor: pointer;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}

/* Akkordeon Toggler Hover */
.toggler:hover {
    color:#f60;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}

/* Akkordeon Toggler Aktiv */
.toggler.active {
    background-image:url("files/layout/svg_icons/minus-square.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
}

---

Man köönte das Icon evtl auch noch pulsierend animieren?

ToM

Zitat:

---

Zitat von Nightwing

Man köönte das Icon evtl auch noch pulsierend animieren?
ToM

---

Eventuell mit zoom oder rotate bei hover.....

Code:

---

yourClass {
    width: 14px;
    height: 14px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border: 2px solid #ffaf04;
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

---

z.B.