CODEWITHSUNDEEP
javascripthtmlcss
Nautilus
Nautilus

Reputation: 131

Toggle Visibility in JavaScript

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?

Upvotes: 11

Views: 24382

Answers (4)

not2savvy
not2savvy

Reputation: 4243

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>

Upvotes: 0

user663031
user663031

Reputation:

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>

Upvotes: 8

G-Cyrillus
G-Cyrillus

Reputation: 105853

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>

Upvotes: 4

Ori Drori
Ori Drori

Reputation: 191946

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>

Upvotes: 11

Related Questions