Question

I have a small script consisting of the code:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

And some HTML:

<a href="#admin" onclick="toggle_visibility('test').style.display='block';">Test Me</a>   
<br/>

<div id="test" style="display:none;">
    Hello there
</div>

The code makes it so that when the Test Me link is clicked the becomes visible, I am curious about how to make it so that when clicked the Test Me link the text colour would change?

Answer 1

Well.
First the onclick attr is wrong, you see. The function is calling toggle_..., then it makes the rest.
The js-script

function toggle_visibility(id,$this) {
var e = document.getElementById(id);
if(e.style.display == 'block')
{
  $this.style.color = '';
  e.style.display = 'none';
}
else
{
   $this.style.color = 'gold';
   e.style.display = 'block';
}
}

and the html-code

<a href="#admin" onclick="toggle_visibility('test',this)">Test Me</a><br/>
<div id="test" style="display:none;">
   Hello there

Edit, I also added $this to also now the element that was clicked.