In einer Liste Details fuer ein Element anzeigen lassen

E

eicon11

New member
Hallo,

ich habe eine Liste mit Eintraegen.
Diese eintraege sollen am Anfang ohne Details angezeigt werden.
Neben dem Eintrag soll ein kleiner Button sein auf mit dem man sich die Details des Eintrags anzeigen lassen kann, also es soll dann unten drunter erscheinen.

Also in der Art:

Eintrag 1 [Details]

Eintrag 2 [Details]

usw.


Wenn ich dann auf Details vom Eintrag 2 druecken wuerde soll es dann so aussehen

Eintrag 1 [Details]

Eintrag 2 [Details]
Hier stehen jetzt ganz tolle Details...

Ich weis vorher nicht wie viele Eintraege in der Liste sind. Wie kann man sowas am besten machen ??


Gruesse

eicon11
 
du schreibst die Details in ein Element (display:none) und setzt für jedes Listenelement mit childNodes einen event-Handler.

Code: 
var list = document.getElementById("liste");

for(var i=0; i<list.childNodes.length; i++) {
  if(list.childNodes[i].tagName.toLowerCase() == "li") {
    list.childNodes[i].childNodes[1].onclick = function(details) {
      return function() {
        if(details.style.display == "block") details.style.display = "none";
        else details.style.display = "block";
      }
    }(list.childNodes[i].childNodes[2]);
  }
}

Code: 
<ul id="liste">
  <li>
    <span>Test</span><a href=#">mehr</a>
    <p>
      Ich bin ein extra
    </p>
  </li>
</ul>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben