Question

EDIT:
Ive edited my code a little thanks to Alexander’s advice, but im still getting the problem of the contents of the div not showing, ive looked up proper closing and cant see where else or if i need to add it anywhere else in the code. My update question is, what am i missing for this to work? Thanks

I have a table which is generated from a query, in this table there is a div, i need this div to show/hide onclick, now i have a working show/hide javascript (shown below) but this only works for 1 div.

how do i modify this so that my divs with id’s generated from my database ($id) can all be shown/hidden seperatly?

javascript:

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

html:

    Info: <a id='$id' href='javascript:toggle(\"$id\");'>show</a>
          <div id='$id' style='display: none'></div>

Answer 1

in your generated HTML you can pass id value to your toggle() function so resulting HTML code will look like

Info: <a id='$id' href='javascript:toggle("$id");'>show</a>
      <div id='$id' style='display: none'></div>

javascript

function toggle(id) {
       var ele = document.getElementById(id);
       var text = document.getElementById(id);
                 if(ele.style.display == "block") {
                 ele.style.display = "none";
                 text.innerHTML = "show";
     }
     else {
        ele.style.display = "block";
        text.innerHTML = "hide";
     } 
}