Mondgesang
Lieutenant
- Registriert
- Dez. 2023
- Beiträge
- 849
Liebe Freunde,
auf meiner Website habe ich 3 Bilder von Personen. Dazu habe ich 3 Texte die zu der jeweiligen Person gehören. Ich möchte, dass beim Besuch der Seite zunächst alle Texte ausgeblendet sind. Nur beim Klick auf ein Bild soll der dazu gehörige Text eingeblendet werden. Beim Klick auf ein anderes Bild soll der Text verschwinden und der wiederum DA hinzugehörige Text erscheinen.
Dies konnte ich dank eines users von Stack Overflow gut nachbauen: https://jsfiddle.net/q57et2sL/
Hier sind zwar nur zwei Optionen anklickbar aber ok. Das kann man ja beliebig ausweiten. Ich habe dies auch schon erfolgreich auf meiner Website ausgebaut.
ALLERDINGS setzt diese Methode voraus, dass alle Elemente, also sowohl die Bilder als auch die dazugehörigen Texte innerhalb dieses einen divs sind, das sie umschließt. Warum weiß ich nicht. Ich weiß bloß, dass es NICHT klappt, wenn sie nicht alle darin sind. Und da ist mein Problem.
Meine Bilder auf der Seite befinden sich in einem <div class="staff-row"> damit sie schön passend angeordnet sind. Die Texte werden darunter eingeblendet. Alleine diese Trennung sorgt dafür dass diese Methode nicht mehr funktioniert.
Dann aber habe ich mir gedacht es kann doch nicht SO schwer sein und mir fielen die Radio Buttons ein. Die haben ja die Eigenschaft dass immer nur einer fokussiert oder checked sein kann während die anderen es nicht sind.
Kann ich da nicht auf die texte die ja in <div class="hiddendiv"> stecken und in CSS .hiddendiv {display: none} haben einfach sagen dass wenn radiobutton 1 checked ist oder focus hat (weiß nicht wie Radiobuttons in CSS anvisiert werden; bei tabindex war das focus) dass dann der dazugehörige Text dann display: block bekommt? Wo auch IMMER der sich bei mir auf der Seite befindet?
Beispiel
Radiobutton1 class="button1"<img>
Radiobutton2 class="button2"<img>
Radiobutton3 class="button3"<img>
<div class="hiddendiv" id="mitarbeiter1">
<p>...</p>
</div>
<div class="hiddendiv" id="mitarbeiter2">
<p>...</p>
</div>
<div class="hiddendiv" id="mitarbeiter3">
<p>...</p>
</div>
CSS
.hiddendiv {
display: none;
}
.button1:focus #mitarbeiter1 {
display: block;
}
.button2:focus #mitarbeiter2 {
display: block;
}
.button3:focus #mitarbeiter3 {
display: block;
}
Sowas in der Art stelle ich mir vor. Ich habe das Gefühl dass ich so weit von der Lösung nicht sein kann.
Soeben fand ich auch diese Anleitung: https://enmascript.com/articles/2019/09/26/toggle-content-on-click-without-javascript/
Hier kann man auch erst versteckten Text per Click sichtbar machen. Was mich hier allerdings stört ist dass man den text wieder manuell einklappen muss.
auf meiner Website habe ich 3 Bilder von Personen. Dazu habe ich 3 Texte die zu der jeweiligen Person gehören. Ich möchte, dass beim Besuch der Seite zunächst alle Texte ausgeblendet sind. Nur beim Klick auf ein Bild soll der dazu gehörige Text eingeblendet werden. Beim Klick auf ein anderes Bild soll der Text verschwinden und der wiederum DA hinzugehörige Text erscheinen.
Dies konnte ich dank eines users von Stack Overflow gut nachbauen: https://jsfiddle.net/q57et2sL/
Hier sind zwar nur zwei Optionen anklickbar aber ok. Das kann man ja beliebig ausweiten. Ich habe dies auch schon erfolgreich auf meiner Website ausgebaut.
ALLERDINGS setzt diese Methode voraus, dass alle Elemente, also sowohl die Bilder als auch die dazugehörigen Texte innerhalb dieses einen divs sind, das sie umschließt. Warum weiß ich nicht. Ich weiß bloß, dass es NICHT klappt, wenn sie nicht alle darin sind. Und da ist mein Problem.
Meine Bilder auf der Seite befinden sich in einem <div class="staff-row"> damit sie schön passend angeordnet sind. Die Texte werden darunter eingeblendet. Alleine diese Trennung sorgt dafür dass diese Methode nicht mehr funktioniert.
Dann aber habe ich mir gedacht es kann doch nicht SO schwer sein und mir fielen die Radio Buttons ein. Die haben ja die Eigenschaft dass immer nur einer fokussiert oder checked sein kann während die anderen es nicht sind.
Kann ich da nicht auf die texte die ja in <div class="hiddendiv"> stecken und in CSS .hiddendiv {display: none} haben einfach sagen dass wenn radiobutton 1 checked ist oder focus hat (weiß nicht wie Radiobuttons in CSS anvisiert werden; bei tabindex war das focus) dass dann der dazugehörige Text dann display: block bekommt? Wo auch IMMER der sich bei mir auf der Seite befindet?
Beispiel
Radiobutton1 class="button1"<img>
Radiobutton2 class="button2"<img>
Radiobutton3 class="button3"<img>
<div class="hiddendiv" id="mitarbeiter1">
<p>...</p>
</div>
<div class="hiddendiv" id="mitarbeiter2">
<p>...</p>
</div>
<div class="hiddendiv" id="mitarbeiter3">
<p>...</p>
</div>
CSS
.hiddendiv {
display: none;
}
.button1:focus #mitarbeiter1 {
display: block;
}
.button2:focus #mitarbeiter2 {
display: block;
}
.button3:focus #mitarbeiter3 {
display: block;
}
Sowas in der Art stelle ich mir vor. Ich habe das Gefühl dass ich so weit von der Lösung nicht sein kann.
Soeben fand ich auch diese Anleitung: https://enmascript.com/articles/2019/09/26/toggle-content-on-click-without-javascript/
Hier kann man auch erst versteckten Text per Click sichtbar machen. Was mich hier allerdings stört ist dass man den text wieder manuell einklappen muss.
