Der Martin: Bildwechsel durch Klicken auf h3 oder das Bild

Beitrag lesen

Hi,

Für ein Accordion benötige ich eine Pfeil-Grafik, die sich ändert:
Ich habe einen Text (Klick mich) und daneben eine Grafik (ein Pfeil nach rechts).
Klicke ich nun auf den Text oder den Pfeil, so soll der Pfeil nach unten zeigen.
Und wenn man nochmal drauf klickt wieder nach rechts.

und gleichzeitig soll vermutlich ein nachfolgender Textblock ein- und ausgeblendet werden, richtig?

=> Die Pfeil-Grafik muss mit JavaScript ausgetauscht werden.

Nein. Man kommt ganz ohne Javascript aus. Ich würde eine CSS-Lösung vorschlagen, die (beispielhaft) auf folgendem Markup aufbaut:

<ol class="accordion">  
 <li>  
  <input type="checkbox" id="acc1"><label for="acc1">Abschnittsüberschrift</label>  
  <div>  
   Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.  
  </div>  
 </li>  
 ...  
</ol>

Ich hab das gleich in eine Liste verpackt, weil dein Hinweis auf ein Accordion vermuten lässt, dass es eine ganze Reihe solcher Strukturen gibt. Der eigentliche Kniff ist nun, sowohl das label-Element, als auch den div-Container vom Zustand :checked der Checkbox abhängig zu machen, während die Checkbox selbst ausgeblendet wird (die klicksensitive Fläche soll der label-Text sein).

ol.accordion  
 { list-style-type: none;    /* keine Bullets/Nummern anzeigen */  
 }  
  
ol.accordion input[type="checkbox"]  
 { display: none;            /* Checkbox ausblenden */  
 }  
  
ol.accordion input[type="checkbox"]~label  
 { background:  url(downarrow.png) no-repeat left top; /* Default: Pfeil nach unten */  
   padding-right: 20px;      /* Platz für Pfeil */  
 }  
ol.accordion input[type="checkbox"]:not(:checked)~div  
 { display: none;            /* div-Container ausblenden, wenn Checkbox nicht gewählt ist */  
 }  
ol.accordion input[type="checkbox"]:not(:checked)~label  
 { background:  url(rightarrow.png) no-repeat left top; /* Checkbox inaktiv: Pfeil nach rechts */  
 }

Die scheinbar umständliche Konstruktion mit der Negation duch :not() bewirkt, dass Browser, die die Pseudoklassen :not und/oder :checked nicht unterstützen, als Notlösung alle Blöcke aufklappen.
Hab ich noch was vergessen? ... Ich glaub, das war's im Wesentlichen.

So long,
 Martin

--
Zwischen Leber und Milz
passt immer noch'n Pils.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(