Edward K. Edward K. -3 years ago 42
HTML Question

How to toggle <p> once you click on <button> for second time?



function testFunction(){
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}

<p id= "test"> **I would like to hide this once user clicks on button for a second time!!** </p>


<button type= "button" onclick="testFunction()"> Click Here! </button>





I am wondering how I hide the paragraph once a user clicks on the button a second time? When user clicks on button the first time, javascript is enabled and the code is shown, but then paragraph stays on the screen even after user clicks for a second time on button. Is there some way I can hide what is displayed if user clicks on button for a second time?

<p id= "test"> **I would like to hide this once user clicks on button for a second time!!** </p>
<script>
function testFunction(){
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}
</script>

<button type= "button" onclick="testFunction()"> Click Here! </button>

Answer Source

First of all, I don't think that you should alter the style of elements trough js, that is what css is for (exceptions exist obviously). You could however alter the state of an element, and have your css react to that. I find it keeps your code a lot easier to maintain, and you know automatically where to look for what when you need to change something.

Have a look at the fiddle I prepared: http://jsfiddle.net/7xy39ufz/1/

So I added a state to your markup (I went for a data attribute, but a class or something could do as well)

<p id="test" data-visible="0">...</p>
<button type="button" id="button">...</button>

Then in the css I added a few lines that would react to the state:

p {
    font-size: 50px;
    color: blue;
}
p[data-visible="0"] {
    display: none;
}
p[data-visible="1"] {
    display: block;
}

And with all that done the javascript becomes very simple

document
    .getElementById('button')
    .addEventListener('click', testFunction, false);


function testFunction(){
    var x = document.getElementById("test");
    x.dataset.visible = x.dataset.visible == 0 ? 1 : 0;
}

Note that I moved the binding of the click event to js as well, in part because I couldn't get it to work in the fiddle (a scope / sandbox issue i guess), but mainly because I find js belongs with js, not in your markup.

Update
The real 'magic' is indeed being done in this line:

x.dataset.visible = x.dataset.visible == 0 ? 1 : 0;

This is basically a short hand for

if (x.dataset.visible == 0) {
    x.dataset.visible = 1;
} else {
    x.dataset.visible = 0;
}

(look up 'ternary' if you want to learn more about the syntax)

This code switches the data-visible attribute of you p between 1 and 0. The css reacts to that by setting the display property of that paragraph (that is what the attribute selector [data-visible="..."] is for).

I hope this clarifies things for you. Feel free to ask if you want me to explain further.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download