DIV Eigenschaften per Klick ändern und Variable setzen

Hallo. Ich bräuchte mal einen kleinen Rat oder zumindest einen Denkanstoß.

Ich möchte eine eine Gruppe von DIV-Containern als Formular verwenden. Dabei sollte der Nutzer eine oder mehrere Optionen pro Gruppe auswählen können. Das sollte visuell natürlich auch irgendwie hervorgehoben werden. Z.B. Hintergrundfarbe "onclick" ändern. Wäre aber ein Toggle nötig (Option soll ja auch wieder deaktiviert werden können).

EIn Lösungsansatz wäre echt klasse!

Bild: http://up.picr.de/21482049py.png

<h2>Optionsgruppe1</h2>
<div id="angebot">Option1</div>
<div id="angebot">Option2</div>
<div id="angebot">Option3</div>
<div id="angebot">Option4</div>
<div id="angebot">Option5</div>

<h2>Optionsgruppe2</h2>
<div id="angebot">Option1</div>
<div id="angebot">Option2</div>
<div id="angebot">Option3</div>
<div id="angebot">Option4</div>
<div id="angebot">Option5</div>

<h2>Optionsgruppe3</h2>
<div id="angebot">Option1</div>
<div id="angebot">Option2</div>
<div id="angebot">Option3</div>
<div id="angebot">Option4</div>
<div id="angebot">Option5</div>

Answer 1

[grimoires]

Inline ist ein guter Start. (Nein, das ist nicht immer böse und schlecht.)

Eine ganz simple Variante, die nichts weiter benötigt ist:

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

als OnClik des Elements setzt du halt onClick="toggle_visibility(ID_des_div_elements)"; - in diesem Fall wird das display zwischen sichtbar/unsichtbar geändert. Andere styles kannst du entsprechend anpassen.

Generell: Eine ID ist EINZIGARTIG! Du vergibst eine ID oben 15 Mal - das funktioniert nicht und sorgt schnell für Konflikte. (Classes kannst du mehrfach vergeben.)

Answer 2

[Steffile]

Erstml wuerde ich die divs in eine Inline Liste stellen, damit du mehr Kontrolle ueber die List-Items hast, und dann eine einfache onclick funktion benutzen.

http://jsfiddle.net/9m5wP/

Answer 3

[Elroy7000]

Warum verwndest du denn nicht ein Formular als Formular, das ist auf jedem Fall sinnvoller als diese div Container.

So wie du es jetzt hast ist es auf jedem Fall semantisch falsch ausgezeichnet.

Verwende div Container nur noch dann wenn es nicht anders geht.