Toggle Visibility in JavaScript

Question

I'm trying to make a button that shows a paragraph on click and hides it on a second click. Instead of using a more traditional method, I went with using JavaScript to change the style from visibility:hidden to visibilitiy:visible.

<style>
#p {
visibility:hidden;
}
</style>

<button onclick="show() ">Click me</button>

<p id="p">hi</p>

<script>
function show() {
    document.getElementById("p").style.visibility = "visible";
}
</script>

How can I do this without jQuery?

Just check if the paragraph is visible, in that case, hide it, else show it. — Teemu, Aug 11 '17 at 21:06
https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript?rq=1 — chrisjlee, Aug 11 '17 at 21:07

score 8 · Accepted Answer · answered Aug 11 '17 at 21:07

You can use Element#classList to toggle a class on and off:

var p = document.getElementById("p"); // get a reference to p and cache it

function show() {
  p.classList.toggle('hideP'); // toggle the hideP class
}

document.getElementById('button').addEventListener('click', show); // add an event listener to the button

.hideP {
  visibility: hidden;
}

<button id="button">Click me</button>

<p id="p" class="hideP">hi</p>

score 3 · Answer 2 · answered Aug 11 '17 at 21:16

you could test the CSS property and set a var once the first check is made.

var $test;
function show() {
  if ((document.getElementById("p").style.visibility = "hidden") | ($test!="visible"))
  {document.getElementById("p").style.visibility = "visible";
  $test="visible"
  }
  else  
  {document.getElementById("p").style.visibility = "hidden";
  $test="hidden"}
}

#p {
  visibility: hidden;
}

    <button onclick="show() ">Click me</button>

    <p id="p">hi</p>

score 3 · Answer 3 · answered Aug 12 '17 at 03:24

Here's the non-JS approach, using a hidden checkbox to store the state:

input:checked + #text { display: none; }

<label for="check">Press me</label>

<input id="check" type="checkbox" style="display: none; ">

<p id="text">This is some text.</p>

Toggle Visibility in JavaScript

3 Answers3