Javascript: Hiding and Showing div tag with a toggle button

css, hide, javascript, show, toggle

Solution

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

Problem

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.

Original source

Related problems