show/hide div using query results in function

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

liunian is right, never use an id twice

Soundz
– Soundz

2012-09-17 06:28:54 +00:00
Commented Sep 17, 2012 at 6:28 — Soundz
– Soundz, Commented Sep 17, 2012 at 6:28

Night2 · Accepted Answer · 2012-09-17 06:30:11Z

2

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>';

answered Sep 17, 2012 at 6:30

Night2

1,1539 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AboQutiesh · Accepted Answer · 2012-09-17 06:28:42Z

0

you are using the same id for both href and div

php:

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

change the $id of the A .

answered Sep 17, 2012 at 6:28

AboQutiesh

1,7162 gold badges9 silver badges14 bronze badges

Collectives™ on Stack Overflow

show/hide div using query results in function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related