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 10 · 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 6 · Answer 2 · 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>

score 3 · Answer 3 · 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 0 · Answer 4 · answered Apr 20 '23 at 11:55

Based on user663031's answer, here's my generalized CSS only solution that can be used multiple times in a page:

/* hide the input field */
.toggle-section > input.toggle-control { 
display: none; 
}
/* start with hidden collapsed icon */
.toggle-section > label .toggle-icon-expanded { 
display: none; 
}
/* display expanded icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-expanded { 
display: inline; 
}
/* hide collapsed icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-collapsed { 
display: none; 
}
.toggle-section .toggle-text * { 
display:inline; vertical-align:top 
}
/* start with hidden contents */
.toggle-section > .toggle-contents { 
display: none; 
}
/* display contents when expanded */
.toggle-section > input.toggle-control:checked ~ .toggle-contents { 
display: block; 
}

<div id="example-1" class="toggle-section">
<input id="example-1-check" class="toggle-control" type="checkbox">
<label for="example-1-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">More details here</span></label>
  <div class="toggle-contents">

    <p>This is some text.</p>
  </div>
</div>



<div id="example-2" class="toggle-section">
<input id="example-2-check" class="toggle-control" type="checkbox">
<label for="example-2-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">Other details here</span></label>
  <div class="toggle-contents">

    <p>This is another text.</p>
  </div>
</div>

Toggle Visibility in JavaScript

4 Answers4