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.

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.

• javascript
• html
• json

• whydo you want to avoid using the onclick event? Your only other option is <a href="javascript:showDiv()">, but that's no better... – Mike Ruhlin Commented Dec 5, 2010 at 3:58
• If the link is hidden, how can you click on it? – PleaseStand Commented Dec 5, 2010 at 3:58
• 1 @MikeRuhlin Your comment is very incorrect. There is absolutely an alternative (more than one, in fact) to mixing your JavaScript in with your HTML markup. You should eschew the onclick attribute in HTML, along with all other JavaScript event handlers in your HTML. – Phrogz Commented Dec 5, 2010 at 4:05
• 1 @CyberJunkie If you are programmatically generating the HTML anchors and injecting them into the DOM, it's marginally acceptable. It is not OK if your HTML is sent from the server to the browser with such semantically-incorrect anchors. jQuery, however, is irrelevant here. The fact that plenty of people improperly use jQuery, Prototype, and other JavaScript libraries with their HTML does not make it correct. – Phrogz Commented Dec 5, 2010 at 4:13
• 1 @CyberJunkie It's not syntactically unsupported. JavaScript supports it just fine (just as it does with applying click handlers to other elements as well). It's simply the wrong HTML markup for the task at hand, just as using blockquote to visually indent content that is not a quote is incorrect. – Phrogz Commented Dec 5, 2010 at 4:23

3 Answers 3

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

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

Add this to the script:

function myFunction() {

            var btn = document.getElementById("myButton");
            //to make it fancier
            if (btn.value == "Click To Open") {
                btn.value = "Click To Close";
                btn.innerHTML = "Click To Close";
            }
            else {
                btn.value = "Click To Open";
                btn.innerHTML = "Click To Open";
            }
            //this is what you're looking for
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

and edit the button and div:

<button onclick="myFunction()" id="myButton" value="Click To Open Instructions">Click To Open Instructions</button>

 <div style="display:none;" id="myDIV">
</div>