3

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.

Cyber Junkie
  • 784
  • 6
  • 14
  • 30
  • whydo you want to avoid using the onclick event? Your only other option is , but that's no better... – Mike Ruhlin Dec 05 '10 at 03:58
  • If the link is hidden, how can you click on it? – PleaseStand Dec 05 '10 at 03:58
  • @idealmachine, sorry I edited the code – Cyber Junkie Dec 05 '10 at 04:01
  • Note that your markup looks strongly like you're abusing HTML anchors for JavaScript hooks, which you should not do. Use a ` – Phrogz Dec 05 '10 at 04:01
  • @Phrogs, I assumed that it's like jquery. Would you disagree? – Cyber Junkie Dec 05 '10 at 04:03
  • @CyberJunkie I'm not sure what you mean by that question. – Phrogz Dec 05 '10 at 04:04
  • @Cyber Junkie: For the edited code, did you mean `id="element"` or not? – PleaseStand Dec 05 '10 at 04:04
  • 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 Dec 05 '10 at 04:05
  • @Phrogz I mean, using HTML anchors like is done a lot in Jquery. Is it not ok with plain js? – Cyber Junkie Dec 05 '10 at 04:10
  • 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 Dec 05 '10 at 04:13
  • Oooh I see! Using HTML anchors is very efficient tho.. Hopefully js will support this improper coding in the future. – Cyber Junkie Dec 05 '10 at 04:16
  • @phrogz, when I made my comment I was considering setting the onlick attribute via HTML or Javascript to be equivalent to each other. The fact is, your solution is WORSE than setting it straight on the HTML because it makes it harder to debug. In one case, I can inspect an element in Firebug and see the onclick event right there. In the other, I have to search through javascript that might wire it up by ID, class name, or tag name. – Mike Ruhlin Dec 05 '10 at 04:23
  • 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 Dec 05 '10 at 04:23
  • Duplicate of [Show/hide 'div' using JavaScript](/q/21070101/4642212). There are far better answers over there. – Sebastian Simon Jun 19 '21 at 06:42

3 Answers3

8
document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};
Phrogz
  • 296,393
  • 112
  • 651
  • 745
3

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 = '';
PleaseStand
  • 31,641
  • 6
  • 68
  • 95
-1

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>
Krisi Suci
  • 129
  • 1
  • 4