Question

I have several div’s using an id obtained from a query, this id is then used in a function to show/hide the div onclick. My problem is using the below code the div seems to open with “show” changing to “hide” (clicking “hide” does not change to “show”) but the contents of the div is not shown.

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";
 } 
 } 

php:

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

Answer 1

You are using same ID twice which is wrong, adding a _toggle to your a tag’s id can fix this.

Change your codes to this and it may work:

Javascript:

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

php:

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