Codes los van elkaar laten werken

[Estel]

Hallo, ik heb een tekst uitklapsysteem met html op internet gevonden, het systeem functioneert geheel naar wens, totdat ik nog een uitklapsysteem eronder wil plakken. Het uitklapsysteem eronder werkt dan namelijk op het systeem erboven, d.w.z. dat ik niet nog een uitklapsysteem + uitklapbare tekst heb geplaatst, maar gewoon een link om het bovenstaande uitklapsysteem uit te klappen! Weet iemand hoe ik de codes los van elkaar kan laten werken, zodat het uitklapsysteem onder het bovenste uitklapsysteem gewoon de ingevoerde tekst uitklapt en niet de tekst van het systeem erboven?

Het gaat om de volgende code:

<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 = "Uitklaplink";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Uitklaplink";
	}
} 
</script>
 
<a id="displayText" href="javascript:toggle();">Uitklaplink</a>
<div id="toggleText" style="display: none; font-size: 14px;">Uitklaptekst</div>

Bij voorbaat dank!

 

[bron]

Ik vermoed dat het hier zit

.....getElementById("toggleText")
.....getElementById("displayText")

<a id="displayText" .....
<div id="toggleText" .....

Verder is mijn kennis niet toereikend genoeg.

 

[JoZ1]

Ik zou zoiets doen:

<script language="javascript"> 
function toggle(text, str) {
    var ele = document.getElementById(str);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Uitklaplink";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Uitklaplink";
    }
} 
</script>

<a href="#" onclick="toggle(this, 'toggleText1');">Uitklaplink</a>
<div id="toggleText1" style="display: none; font-size: 14px;">Uitklaptekst</div>


<br><br>

<a href="#" onclick="toggle(this, 'toggleText2');">Uitklaplink</a>
<div id="toggleText2" style="display: none; font-size: 14px;">Uitklaptekst</div>

 

[Estel]

Bedankt voor jullie reacties! @JoZ1: Het werkt, maar nu zou ik graag twee verschillende teksten als uitklaplinks willen. Op regel 15 en 21 kan ik die wel wijzigen, maar als de links dan uitgeklapt en weer in geklapt worden kan ik de teksten op regel 6 en 10 veranderen, dus voor uitgeklapt en weer ingeklapt allebei slechts 1 keer; dus dan zien de uitklaplinks er hetzelfde uit. Zou ik dit ergens kunnen wijzigen?

 

[JoZ1]

Nu ik er eens goed naar kijk, snap ik niet waar deze regels voor nodig zijn:

text.innerHTML = text.innerHTML; (r. 6)
text.innerHTML = "Uitklaplink"; (r. 10)

Als je die weghaalt, blijven de teksten die je in de regels 15 en 21 ingeeft, behouden.

Dat bedoelde je toch??

 

[Estel]

@JoZ1: Ja, alleen zitten we dan weer met het probleem waar ik deze vraag eigenlijk om stelde: de codes klappen elkaar uit. Enfin, ik ga wat sleutelen aan de code en wellicht kom ik er dan wel een keer uit

 

[JoZ1]

De laatste keer dat ik dat testte was dat niet het geval.
Dan heb ik het dus over het script uit post #3 waarin mijn opmerking uit post #5 ook verwerkt is:

<script language="javascript"> 
function toggle(text, str) {
    var ele = document.getElementById(str);
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
} 
</script>
 
<a href="#" onclick="toggle(this, 'toggleText1');">Uitklaplink 1</a>
<div id="toggleText1" style="display: none; font-size: 14px;">Uitklaptekst 1</div>
 
 
<br><br>
 
<a href="#" onclick="toggle(this, 'toggleText2');">Uitklaplink 2</a>
<div id="toggleText2" style="display: none; font-size: 14px;">Uitklaptekst 2</div>