HTML/CSS/Javascript Content-Spoiler ohne onclick-Event?

... komplette Frage anzeigen

2 Antworten

Bist da mit CSS/HTML alleine etwas eingeschränkt, je nach dem wie viel da her muss, wärs vielleicht besser herauszufinden warum das Click-Event nicht funktioniert. (onclick Wird vielleicht irgendwo überschrieben? Kannst es ja mit addEventListener probieren)

Ansonsten gibt es für CSS einen Hack mit der Checkbox, bei der man eine unsichtbare Checkbox in ein label-Element mit einem anderem Element legt. Das label-Element sorgt dafür, das bei Klick auf dem anderem Element die Checkbox angesteuert wird.

Anschließend wird je nach Zustand der Checkbox das Style gesetzt:

.spoiler_wrapper > input[type="checkbox"]:checked ~ .spoiler_body {
background: initial;
}

Hier eine Demo davon:

https://jsfiddle.net/u13pk2zL/

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von fluffiknuffi
09.03.2016, 12:32

Nett, die Checkbox-Idee. :)

0
Kommentar von WalterLemon
10.03.2016, 01:52

Danke übrigens für deine Antwort! Leider funktioniert das ebenfalls nicht, weil ich in dem Forenpost keine CSS-Styles im Header definieren kann. Das wird von der Forensoftware nicht erkannt. Einzig Inline-styles lassen sich problemlos anwenden. Genauso wenig wie die Definition der CSS-Styles im Head-Bereich wird PHP erkannt - was das Hauptproblem dafür war, dass mein bisheriger Spoilerentwurf nicht funktioniert hat. Laut der Aussage eines Teammitglieds sollte Javascript dagegen allerdings funktionieren :D Nur hinsichtlich PHP sind mir eben die Hände gebunden, und mit CSS lässt sich nur eingeschränkt arbeiten. Durch dieses ganze Hin und Her bin ich inzwischen am Überlegen, die Spoiler einfach wegzulassen und den Text konventionell einzutippen - was zwar nicht so elegant wäre, dafür aber wenigstens reibungslos funktioniert :D

0

Hier nochmal eine ähnliche Idee wie die von Sarkophator, die sich evtl. besser für dein Bild eignen könnte: http://codepen.io/Minilexikon/pen/Kzzyej

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von WalterLemon
10.03.2016, 01:57

Auch vielen Dank für deine Antwort, aber leider befürchte ich da ein ähnliches Problem wie bei der Checkbox-Lösung von Sarkophator (siehe mein Kommentar unter seinem Beitrag). Immerhin habe ich jetzt aber grünes Licht für Javascript bekommen, was dem ganzen vielleicht doch noch Abhilfe verschaffen könnte. Eventuell findet sich da eine Lösung ;)

0