Mehrfaches Ausblenden/Anzeigen von Text

Question

Hallo, ich würde gerne fragen, wie mehrere versteckte/mehr Code für meine WordPress-Website zu erstellen. Ich habe Probleme mit dem folgenden Code unten, die Quelle wird durcheinander gebracht. Wie unterscheide ich die beiden? Bitte helfen Sie, danke!

--Script1-- 
<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 = "Click here for complete details."; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "Hide details."; 
} 
} 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a> 
<div id="toggleText" style="display: none">Details</div> 
</span> 

--Script2-- 
<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 = "Click here for more information."; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "Hide Disclaimer."; 
} 
} 
</script><a id="displayText" href="javascript:toggle();">Click here for more information.</a> 
<div id="toggleText" style="display: none">Information</div> 
</span> 

Answer 1

Ändern Sie den Namen function und der id. Ich hoffe, dass diese Antwort hilft.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 = "Click here for complete details."; 
 
} 
 
else { 
 
ele.style.display = "block"; 
 
text.innerHTML = "Hide details."; 
 
} 
 
} 
 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a> 
 
<div id="toggleText" style="display: none">Details</div> 
 
</span> 
 

 
--Script2-- 
 
<script language="javascript"> 
 
function toggle1() { 
 
var ele = document.getElementById("toggleText1"); 
 
var text = document.getElementById("displayText1"); 
 
if(ele.style.display == "block") { 
 
ele.style.display = "none"; 
 
text.innerHTML = "Click here for more information."; 
 
} 
 
else { 
 
ele.style.display = "block"; 
 
text.innerHTML = "Hide Disclaimer."; 
 
} 
 
} 
 
</script><a id="displayText1" href="javascript:toggle1();">Click here for more information.</a> 
 
<div id="toggleText1" style="display: none">Information</div> 
 
</span>

Answer 2

In JavaScript, das ein zweites Verfahren mit dem gleichen Namen ersetzt die vorherige Zugabe.

Stattdessen sollten Sie Parameter zur Funktion hinzufügen und sie übergeben, wenn Sie sie aufrufen.

function toggle(ele) { 
 
\t var text = ele.nextElementSibling; 
 
\t if (text.style.display == "block") { 
 
\t \t text.style.display = "none"; 
 
\t \t ele.innerHTML = ele.getAttribute('data-initial-text'); 
 
\t } else { 
 
\t \t text.style.display = "block"; 
 
\t \t ele.innerHTML = ele.getAttribute('data-hide-text'); 
 
\t } 
 
}

<a data-initial-text='Click here for complete details.' data-hide-text='Hide details.' href="javascript:;" onclick="toggle(this);">Click here for complete details.</a> 
 
<div style="display: none">Details</div> 
 

 
<a data-initial-text='Click here for more information.' data-hide-text='Hide Disclaimer.' href="javascript:;" onclick="toggle(this);">Click here for more information.</a> 
 
<div style="display: none">Information</div>

Answer 3

Sie haben verschiedene ID für die Elemente zu geben, wie die ID eindeutig sein sollte. Und definieren Sie auch verschiedene Funktionsnamen. Sie verwenden die gleiche Funktion Name:

Bitte versuchen Sie unten Code:

function toggle1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Click here for complete details."; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide details."; 
    } 
} 
</script> 
<a id="displayText1" href="javascript:toggle1();">Click here for complete details.</a> 
<div id="toggleText1" style="display: none">Details</div> 


<script language="javascript"> 
function toggle2() { 
    var ele = document.getElementById("toggleText2"); 
    var text = document.getElementById("displayText2"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Click here for more information.111"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Disclaimer.111"; 
    } 
} 
</script> 
<a id="displayText2" href="javascript:toggle2();">Click here for more information.</a> 
<div id="toggleText2" style="display: none">Information</div>