Javascript show element on click

Question

I'm trying to do this without Jquery. I want to show a div when clicking a trigger. So far I have this to hide the element.

 document.getElementById('element').style.display = 'none';

HTML..

<div class="element">Ahem, boo!!</div>
<a href="#" id="showDiv">Show</a>

How do I create a function to show the div when clicking the link? I would like to avoid using functions like onclick="showDiv() in the link itself.

Answer 1

document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};

Answer 2

It's possible to attach event handlers completely within JavaScript. Example:

document.getElementById('showDiv').onclick = function() {
    // Do whatever now that the user has clicked the link.
};

To reverse the effect of the first line of code you posted, you could use:

document.getElementById('element').style.display = 'block'; // or
document.getElementById('element').style.display = '';