Chris
Chris

Reputation: 345

How to hide content with the same button that shows it?

I am currently using

<a href="#" onclick="document.getElementById('history').style.display='block';return(false);">

To show content labelled with "history" when I click a certain button. How do I set it so that same button hides the content? I tried adding the same code again and replacing "get" with "hide" and "return(false)" to return(true) as that seemed logical to me but when I click the button nothing happens now (perhaps I have not understood something).

What is the easiest way to have the same button show and hide content?

Upvotes: 0

Views: 514

Answers (2)

James Allardice
James Allardice

Reputation: 165971

If you can't use jQuery (as has already been noted), you can do the following with pure JavaScript:

 var element = document.getElementById("someElement");
 if(element.style.display == "none") element.style.display = "block";
 else element.style.display = "none";

Place this in a function, and pass that function to the the onclick attribute of your element.

Upvotes: 1

Yiğit Yener
Yiğit Yener

Reputation: 5986

I would suggest using JQuery. Such things are pretty easy using it. In JQuery it's simple as the following line.

$("#history").toggle();

Upvotes: 1

Related Questions