Javascript show/hide probleem

[Prokrammer]

Goedenmiddag mensen :d

ik ben bezig met een website maar ik ondervind een probleem met javascript.
ik heb een tekst waar een link in zit als ik daar op druk verschijnt er extra tekst, alleen het probleem is als ik het script in meerdere teksten toe pas (in mijn geval 3 teksten) dat elke link die ik gebruik om tekst te laten verschijnen alleen de tekst van tekst 1 verschijnt.
Kan iemand mij helpen ?

www.jsfiddle.net/Kjz8r <---- Demo

    <script language="javascript"> 
    function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Lees meer";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Verberg";}} 
    </script>



      <h4>Tekst1</h4>
      <p>zichtbare tekst<a id="displayText" href="javascript:toggle();">Lees meer</p></a> <div id="toggleText" style="display: none">
      <p>Tekst achter de knop</p>
      </div>

      <h4>Tekst2</h4>
      <p>zichtbare tekst 2<a id="displayText" href="javascript:toggle();">Lees meer</p></a> <div id="toggleText" style="display: none"><p>Tekst achter de knop</p>
	  </div>

alvast bedankt!

 

[Kvothe]

Omdat je dezelfde functie aanroept en ze hetzelfde id hebben? Het javascript kan zo niet zien op welke knop er gedrukt wordt.

 

[Prokrammer]

Hoe pas ik deze aan om met meerdere te werken ?
ik ben nieuw met Javascript

 

[Kvothe]

Je moet alle ids uniek maken, en je moet ook een argument invoeren voor toggle(), dus bijvoorbeeld toggle(1), toggle(2), ... voor elke knop.

 

[Prokrammer]

kan je mij een voorbeeld geven ?

 

[Kvothe]

<script language="javascript"> 
    function toggle(id1,id2) {
    var ele = document.getElementById(id2);
    var text = document.getElementById(id1);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Lees meer";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Verberg";}} 
    </script>
 
 
 
      <h4>Tekst1</h4>
      <p>zichtbare tekst<a id="displayText1" href='javascript:toggle("displayText1","toggleText1");'>Lees meer</p></a> <div id="toggleText1" style="display: none">
      <p>Tekst achter de knop</p>
      </div>
 
      <h4>Tekst2</h4>
      <p>zichtbare tekst 2<a id="displayText2" href='javascript:toggle("displayText2", "toggleText2");'>Lees meer</p></a> <div id="toggleText2" style="display: none"><p>Tekst achter de knop</p>
      </div>

 

[Prokrammer]

Het is gelukt.
Heel erg bedankt!