ausklappbare Infoboxen

ill66

Ich hätte gern, dass es in längeren Artikeln zwischendurch Infoboxen gibt - z.B. zur näheren Erläuterung eines Begriffs aus dem Artikel - die auf Klick ausklappen, so dass der 'darin' liegende Text sichtbar wird. Und es wäre schön, wenn es das elegant gleitend tun würde.

Ich habe mir den Kopf qualmend gegoogelt, aber anscheinend ist das mit purem CSS nicht möglich (da wäre nur 'ruckartiges' Aufklappen möglich), ich komme wohl um JS nicht herum.^^° Nun hab ich aber leider nur eine sehr rudimentäre Vorstellung von JS.

Und auch darüber hab ich mir einen Wolf gegoogelt - aber wie man eigenes JS bei einem Anliegen wie meinem idealerweise in sein WP einbindet, hab ich nicht wirklich kapiert. (ich modifiziere bisher zwar wie wild die Theme-CSS-Datei, aber bei Template-Dateien hab ich mich da noch ferngehalten bisher...)

Könnte ich nicht eigentlich die JS-Datei in den js-Ordner meines Parent-Themes tun? Oder wird das bei einem etwaigen Update dann auch überschrieben? (wenn ich in einer bestehenden JS-Datei herumeditieren würde - klar. aber wenn ich eine eigene JS-Datei einfüge auch?)

Help^^

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SuMu

https://de.wordpress.org/plugins/search.php?q=spoiler
wenn du es umfangreich magst, nimm shortcode ultimate.

SirEctor

Zitat von ill66

Ich habe mir den Kopf qualmend gegoogelt, aber anscheinend ist das mit purem CSS nicht möglich (da wäre nur 'ruckartiges' Aufklappen möglich), ich komme wohl um JS nicht herum.^^° Nun hab ich aber leider nur eine sehr rudimentäre Vorstellung von JS.

Hast du dich zum Thema CSS mal mit transition beschäftigt? Damit ist auch smoothes Aufklappen möglich.

helix

Doch, solange das immer nur eine Box ist, die auf- und gegebnenfalls wieder (aktiv) zugeklappt werden soll, geht das mit purem HTML / CSS.
Man kann solche Boxen mit der Pseudoklasse target machen oder mit Checkboxen und klickbarem Label. Ich mag die Checkboxen lieber, weil mich bei der Target-Lösung stört, dass ich die dann auch in der Adresszeile des Browsers habe (und für meinen Geschmack zu tief eingreifen müsste, um das loszuwerden).
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Und dann ist das Ding, dass sich nicht alle CSS-Properties animieren lassen (fließender Übergang). Es gibt nunmal keinen Übergang zwischen display: block; und display: none; … Also ein bisschen rumsuchen und rumprobieren, welcher Effekt zur Seite und zum Inhalt passt.

Wenn du ein „echtes Accordion“ brauchst, bei dem immer nur eine Box geöffnet sein kann – dafür brauchst du dann tatsächlich JS.

Gruß
helix

ill66

SuMu: Ich hätte wohl explizit dazuschreiben sollen, dass ich es am liebsten ohne Plugin händeln will. Ich hab jetzt schon 15 aktiv und afaik heißt es ja, man soll so wenige wie möglich installieren.

SirEctor: Genau das Stichwort hatte ich u.a. in meine Suche eingebaut - es war aber irgendwie trotzdem immer JS involviert.

helix: Whaaa! Ok, das Stichwort "Accordion" hat mir offenbar gefehlt^^
Das sieht vom Ding her ja schonmal toll aus!
Aber was ist mit dieser nicht näher ausgeführten Eischränkung: "Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use." - ich bin da nicht ganz up2date. Ist das ein vernachlässigbares Problem...?

helix

Das ist mittlerweile ein vernachlässigbares Problem. Der Artikel ist jetzt auch schon wieder ein paar Jahre alt (jaa, das geht immer so super schnell).

In dieser Beziehung habe ich caniuse.com sehr zu schätzen gelernt …

… und ähm ja, ich würde es nicht, wie im verlinkten Artikel, mit fest definierten Höhen machen. Das ist einfach zu unflexibel (gerade im responsive Layout ändert sich ja auch die Höhe eines Blocks sehr schnell) – dann lieber eine andere Animationsmethode wählen.

Gruß
helix

ill66

Nach dem ich jetzt den ganzen Tag damit verbracht habe, herumzubasteln und -zuschrauben (ich hab mich wie ein verrückter Professor gefühlt^^), hab ich jetzt Anhand dieses Beispiels mir - vermutlich etwas stümperhaft - folgendes zurecht geforkt:

Zitat

[FONT=courier new]/* Info-Boxen */
.accordion {
position: relative;
float: right;
width: 190px;
margin-left: 10px;
}
/* Radio Inputs */
input[name='panel'] {
display: none;
}
/* Labels */
label {
display: block;
padding: 5px;
border: 1px solid grey;
font-size: 10px;
font-weight: bold;
background: linear-gradient(to bottom, rgba(166,239,9,1) 0%, rgba(143,209,0,1) 100%);
background-color: #9AE004;
color: white;
text-shadow: 0 1px 0 #989B99;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.865, 0.140, 0.095, 0.870);
}
label:after {
font-family: FontAwesome;
font-size: 12px;
content: "\f05a";
position: absolute;
right: 10px;
margin-top: -2px;
}

label:hover {
text-shadow: none;
}

/* Panel Content */
.accordion__content {
overflow: hidden;
max-height: 0em;
position: relative;
padding: 0 20px;
box-shadow: inset 1px 2px 10px 2px #D2D2D2;
background: white;
color: #737573;
transition: all 0.4s cubic-bezier(0.865, 0.140, 0.095, 0.870);
border: 1px solid #D9D9D9;
}

.accordion__header {
padding: 1em 0;
}

.accordion__body {
font-size: .825em;
line-height: 1.4em;
padding: 0 0 1.5em;
}
input[name='panel']:checked ~ .accordion__content {
/* Get this as close to what height you expect */
max-height: 50em;
}[/FONT]
______________________
[FONT=courier new] <div class="accordion">
<input type="checkbox" name="panel" id="panel-1"><br />
<label for="panel-1">Box-Überschrift</label>
<div class="accordion__content">
<p class="accordion__body">
<br> <br>
Box-Inhaltstext.</p>
</div>
</div>[/FONT]

Alles anzeigen

Für Browser, die kein gradient wechseln können, hab ich für das Label noch eien normale Hintergrundfarbe definiert beim Label (darf man das so?^^) und außerdem einen Breakpoint eingebaut (sagt man so?) mit einer etwas geringeren Kastenbreite für Handys.
Bisher bin ich ganz happy :D War der totale Krampf, weil das Beispiel in SCSS glaub ich war? Und WP da jedenfalls mit eingiem nicht umgehen konnte.

So ungefähr sieht das dann aus:

Vielen Dank helix, Du hast mich mit Deinem Hinweis auf den richtige Pfad gebracht! :)

JuliaJu

Da der Beitrag noch nicht so alt ist, hoffe ich, dass es in Ordnung ist, wenn ich mich kurz dran hänge.

Ich versuche gerade ebenfalls, ausklappbare Boxen zu erstellen. Leider erhalte ich nur ein kleines viereckiges Kästchen, in welches man einen Haken platzieren kann. Selbst wenn ich das Beispiel von ill66 einfüge, erhalte ich nicht die gewünschte Box. Schaue ich mir das Ganze allerdings über meinen Texteditor an, dann erhalte ich die Box.

Weiß jemand zufällig, woran das liegt, und wie ich das beheben kann?

helix

Du sprichst ein bisschen in Rätseln. Für mich ist ein Texteditor nicht ein Werkzeug, mit dem man sich Ergebnisse anschauen kann …

Egal. Wenn du da was siehst, könnte es ein Hinweis sein, dass deine Arbeit schon in die richtige Richtung geht.
Das kleine vierechige Kästchen, in das du einen Haken platzieren kannst, ist deine Checkbox. Die blendest du nachher mit display: none; aus. Lass sie ruhig zuerst mal drin. Bei der eigentlichen Checkbox siehst du auf einen Blick, ob gewählt oder nicht gewählt ist.
Gehe in der Reihenfolge vor, dass zunächst alle Elemente sichtbar sind. Dann baue die Transition, so dass deine Box nur noch erscheint, wenn deine Checkbox gewählt ist. Dann gib deinem Label ein cursor: pointer; und blende die Checkbox aus …

Hoffe, das hilft dir. Sonst wäre ein Link nützlich, wo man sich das mal ansehen kann.

Gruß
helix

JuliaJu

Ich meine das mit dem Texteditor so, dass ich eine HTML Datei und eine CSS Datei erstellt habe, und mir das dann im Browser angesehen habe. Mein Problem ist, dass ich dieses Ergebnisse aber nicht in Wordpress reproduzieren kann, obwohl ich exakt die gleichen Befehle verwende. Auch bei der Datei von ill66 tritt dieses Problem auf. Über den Texteditor erziele ich das gleiche Ergebnis, in Wordpress bleibt es bei dieser Checkbox.
Ein Link ist derzeit leider noch nicht möglich, die Seite ist gesperrt, weil ich sie im Moment noch aufbaue.

helix

Ich gehe mal davon aus, dass dir bewusst ist, dass du das in WordPress allenfalls hinbekommst, wenn du dein HTML im Textmodus eingibst (Reiter „Text“, nicht „Visuell“). Da gibt es aber auch hin und wieder Probleme, weil dieser WordPress-Editor Zeilenumbrüche mit Enter als Line-Breaks <br /> übersetzt, obwohl man das gewohnheitsmäßig nur gemacht hat, um den Quelltext übersichtlich zu halten …

Vielleicht schreibt ill66 was dazu, ob sie den Code im Editor eingefügt hat.
Ich war irgendwie ganz selbstverständlich von Template-Dateien eines eigenen oder Child-Themes ausgegangen.

Gruß
helix

JuliaJu

Ja genau, ich habe den HTML-Part bei dem gewünschten Beitrag im Textmodus eingegeben, und die CSS-Veränderungen über den Editor meines Childthemes eingefügt. Die eingefügten Zeilenumbrüche hatte ich auch gesehen und entfernt.
In eine Template-Datei habe ich das nicht eingefügt, weil ich beim PHP nicht so fit bin. Ich wüsste nicht, was ich da einfügen müsste, damit ich bei verschiedenen Beiträgen unterschiedliche Inhalte an verschiedenen Positionen erstellen könnte. Ich bin davon ausgegangen, dass die Befehle im Textmodus reichen...

SuMu

Zitat von JuliaJu

Ja genau, ich habe den HTML-Part bei dem gewünschten Beitrag im Textmodus eingegeben, und die CSS-Veränderungen über den Editor meines Childthemes eingefügt. Die eingefügten Zeilenumbrüche hatte ich auch gesehen und entfernt.
In eine Template-Datei habe ich das nicht eingefügt, weil ich beim PHP nicht so fit bin. Ich wüsste nicht, was ich da einfügen müsste, damit ich bei verschiedenen Beiträgen unterschiedliche Inhalte an verschiedenen Positionen erstellen könnte. Ich bin davon ausgegangen, dass die Befehle im Textmodus reichen...

Ich würde dir zu einem Plugin raten.

helix

Ja, ich auch.
Mit der Suchphrase „wp plugin accordion“ ist schon gleich der erste Eintrag ein PlugIn für solche Boxen mit purem HTML und CSS => https://de.wordpress.org/plugins/accordions/

Gruß
helix

Willkommen! Melden Sie sich an oder registrieren Sie sich.

ausklappbare Infoboxen

Jetzt mitmachen!