Toggle() to show/hide text

Hello,

I’m new to JS and am looking for guidance. I am trying to write a script that that will allow me to post a list of topics (list of <div>’s) and then when the topic (<div>is clicked text is posted under that topic. When the topic is clicked again the text is hidden.

I found that a toggle() function works well for this, and I’ve been able to make it work with only one <div> using getElementById(). My question, how can I configure the script so that I can create a list of topics.

Example:

Item1 Item1
Item2 —clicking on Item2 Item2
Item3 Item 2 information here
Item3

Here is the code I’m using:

function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);

if(ele.style.display == “block”) {
ele.style.display = “none”;
//text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
//text.innerHTML = “hide”;
}

}

<a id=”dispayText” href=”javascript:toggle();”>Item 1</a>
<div id=”toggleText” style=”display: none”>Info on item 1
<P>
<a id=”dispayText” href=”javascript:toggle();”>Item 2</a>
<div id=”toggleText” style=”display: none”>Info on item 2</div>
<P>
<a id=”displayText” href=”javascript:toggle();”>Item 3</a>
<div id=”toggleText” style=”display: none”>Info on item 3</div>

I know that I need to change the id’s for each item.

Any guidance would be greatly appreciated.

Cheers,
John

Also in #JavaScript _↴