Javascript: Hiding and Showing div tag with a toggle button

Question

I'll get right to it:

What I need to do is hide a particular div with the press of a button, and it's supposed to be a toggle, so basically: Press once to hide, press again to show, press again to hide etc...

I want the hide/show rules to be done in CSS and the interaction in pure javascript (no jquery please). Well this is what I need to do, but I'm not quite sure how to execute the javascript code.

html:

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

css:

#showhide {
     display: none;
}

.button {
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}

http://jsfiddle.net/fyUJc/14/

Also, if you think this question doesn't belong here or is stupid, please try to refrain from being rude, I'm just trying to learn here.

Answer 1

You can make use an onclick method. Have your HTML as:

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

And have the following JavaScript:

function toggle_visibility(id) 
{
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else 
    {
        e.style.display = 'block';
    }
}

DEMO

Answer 2

Here is an updated JSFiddle of your code that works with native browser methods and implement a simple toggle component - http://jsfiddle.net/fyUJc/31/

var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});

By creating a toggle button you are entering the field of GUI and this is something very complex.

Current browser technologies doesn't provide a rich set of tools to help you with everything you need to handle in GUIs. jQuery is of no help either, as GUIs are more about handling components and state than manipulating the DOM.

Even that the above code works in Chrome, you still need to take care of browser differences in both DOM and event and you will need a better abstraction for the components. There are quite a lot of problems that are not addressed in my code and that will be very difficult to address correctly if you write them from scratch every time. Things like:

• How you initialize newly added togglers on the page ?
• How you sync the state of the div and the button ?
• How you extend and plug into the button behavior ?

I will strongly advise that you look into UI related libraries or frameworks that provide solutions for the common problems. See ReactJS, Dojo or Sencha (ex. ExtJS) to name a few. Look for frameworks that define a Widget/Component life-cycle and ways to extend and define custom ones.

Browser technologies just don't provide the proper abstractions for making UI components.