如何在一个页面上显示多个JavaScript隐藏/显示

Question

Please can you tell me how to change this code so that the user can click on the first read me to see just the sugar text and separately click on the second read me to see the toast text.

It is driving me mad - the display texts have different names but using this code, both read me clicks show the toast comment.

I'm a non-techie with no code knowledge so please reply in simple language!

<p><script language="javascript"> 
function toggle() {
 var ele = document.getElementById("sugar");
 var text = document.getElementById("displayTextsugar");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "read more";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "hide";
 }
} 
</script>   <a href="javascript:toggle();" id="displayTextsugar">read sugar more</a> &lt;== click Here</p>
<p>&nbsp;</p>
<div style="display: none" id="sugar">
<h1>Sugar in my tea but none in coffee please</h1>
</div>
<script language="javascript"> 
function toggle() {
 var ele = document.getElementById("toast");
 var text = document.getElementById("displayTexttoast");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "read more";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "hide";
 }
} 
</script>
<p><a href="javascript:toggle();" id="displayTexttoast">read toast more</a> &lt;== click Here</p>
<div style="display: none" id="toast">
<h1>brown toast with marmite please</h1>
</div>

Answer 1

Since your 2 different codes, shared the same name, only the second one is being called (the first one gets overwritten).

It could be easier to use parameters to make this work, i added a sender and a target to your toggle function, that you can then use with sender (the element that is being clicked) and the target (the element that should hide, or show)

The only changes in your toggle method, is that i am using the parameter to get the elements, so you are now using 1 "code" for both clicks ;)

 function toggle(sender, target) { var ele = document.getElementById(target); var text = sender; if (ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "read more"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } 

 <p><a href="#" onclick="javascript:toggle(this, 'sugar');" id="displayTextsugar">read sugar more</a> &lt;== click Here</p> <p>&nbsp;</p> <div style="display: none" id="sugar"> <h1>Sugar in my tea but none in coffee please</h1> </div> <p><a href="#" onclick="javascript:toggle(this, 'toast');" id="displayTexttoast">read toast more</a> &lt;== click Here</p> <div style="display: none" id="toast"> <h1>brown toast with marmite please</h1> </div>