toggle show/hide div with button?

Hopefully this is an easy question. I have a div that I want to toggle hidden/shown with a button

<div id="newpost">
513610 次浏览
小开

Pure JavaScript:

var button = document.getElementById('button'); // Assumes element with id='button'


button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};

SEE DEMO

jQuery:

$("#button").click(function() {
// assumes element with id='button'
$("#newpost").toggle();
});

SEE DEMO

小开
最佳答案

Look at jQuery Toggle

HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

jQuery:

jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});

For versions of jQuery 1.7 and newer use

jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#content').toggle('show');
});
});

For reference, kindly check this demo

小开

Here's a plain Javascript way of doing toggle:

<script>
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>


<div id="newpost">asdf</div>
<input type="button" value="btn" onclick="toggle();">
小开

You could use the following:

mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');

小开

This is how I hide and show content using a class. changing the class to nothing will change the display to block, changing the class to 'a' will show the display as none.

<!DOCTYPE html>
<html>
<head>
<style>
body  {
background-color:#777777;
}
block1{
display:block; background-color:black; color:white; padding:20px; margin:20px;
}
block1.a{
display:none; background-color:black; color:white; padding:20px; margin:20px;
}
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>
小开

Since toggling using style like:

myElement.style.display = someBoolState ? "block" : "none"

is a really bad idea, here are some examples in JS, jQuery, HTML, CSS:

JavaScript .classList.toggle()

const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");


elToggle.addEventListener("click", function() {
elContent.classList.toggle("is-hidden");
});
.is-hidden {
display: none;
}
<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some content...</div>

The beauty of the above is that the styling is purely handled where it should, and that's in your stylesheet. Also, by removing the .is-hidden class your element will regain its original display mode, being it block, table, flex, or whatever.

jQuery .toggle()

.toggle()Docs
.fadeToggle()Docs
.slideToggle()Docs

$("#toggle").on("click", function(){
$("#content").toggle();                 // .fadeToggle() // .slideToggle()
});
#content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

jQuery - Toggle .toggleClass()Docs

.toggle() toggles an element's display "block"/"none" values

$("#toggle").on("click", function(){
$("#content").toggleClass("show");
});
#content{
display:none;
}
#content.show{
display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

HTML5 - Toggle using <summary> and <details>

(unsupported on IE and Opera Mini)

<details>
<summary>TOGGLE</summary>
<p>Some content...</p>
</details>

HTML - Toggle using checkbox

[id^=toggle],
[id^=toggle] + *{
display:none;
}
[id^=toggle]:checked + *{
display:block;
}
<label for="toggle-1">TOGGLE</label>


<input id="toggle-1" type="checkbox">
<div>Some content...</div>

HTML - Switch using radio

[id^=switch],
[id^=switch] + *{
display:none;
}
[id^=switch]:checked + *{
display:block;
}
<label for="switch-1">SHOW 1</label>
<label for="switch-2">SHOW 2</label>


<input id="switch-1" type="radio" name="tog">
<div>1 Merol Muspi...</div>


<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...</div>

CSS - Switch using :target

(just to make sure you have it in your arsenal)

[id^=switch] + *{
display:none;
}
[id^=switch]:target + *{
display:block;
}
<a href="#switch1">SHOW 1</a>
<a href="#switch2">SHOW 2</a>


<i id="switch1"></i>
<div>1 Merol Muspi ...</div>


<i id="switch2"></i>
<div>2 Lorem Ipsum...</div>

Animating class transition

If you pick one of JS / jQuery way to actually toggle a className, you can always add animated transitions to your element, here's a basic example:

const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");


elToggle.addEventListener("click", () => {
elContent.classList.toggle("is-hidden");
});
#content {
display: inline-flex; /* or whatever */
transition: 0.6s;
}


.is-hidden {
position: relative;
visibility: hidden;
opacity: 0;
transform: scale(0);
}
<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some Togglable content...</div>

小开 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hideshow').click(function(){
$('#content').toggle('show');
});
});
</script>

And the html 

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>
小开

Try with opacity

div { transition: all 0.4s ease }
.hide { opacity: 0; }
<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">


<div id="newpost">Hello</div>


提交答案