Below is my javascript code which i used to show a div
when clicked on a button
.
How can I hide it when clicked again? And then on clicking it, div
should be visible again?
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
To switch the display-style between block
and none
you can do something like this:
function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
working demo: http://jsfiddle.net/BQUyT/2/
In case you are interested in a jQuery soluton:
This is the HTML
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
This is the jQuery script
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
You can see it working here:
If you don't know how to use jQuery, you have to use this line to load the library:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
And then use this line to start:
<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>
So for this case the final code would be this:
<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>
Let me know if you need anything else
You can read more about jQuery here: http://jquery.com/
jQuery would be the easiest way if you want to use it, but this should work.
function showHide(){
var e = document.getElementById('e');
if ( e.style.display !== 'none' ) {
e.style.display = 'none';
} else {
e.style.display = '';
}
}
Try following logic:
<script type="text/javascript">
function showHideDiv(id) {
var e = document.getElementById(id);
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>
You can easily do it with jquery toggle. By this toggle or slideToggle you will get nice animation and effect also.
$(function(){ $("#details_content").css("display","none"); $(".myButton").click(function(){ $("#details_content").slideToggle(1000); }) })
<div class="main"> <h2 class="myButton" style="cursor:pointer">Click Me</h2> <div id="details_content"> <h1> Lorem Ipsum is simply dummy text</h1> <p> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div>
使用 JQuery .toggle()
你可以轻松完成
$( ".target" ).toggle();
Bootstrap 4 provides the Collapse component for that. It's using JavaScript behind the scenes, but you don't have to write any JavaScript yourself.
This feature works for <button>
and <a>
.
If you use a <button>
, you must set the data-toggle
and data-target
attributes:
<button type="button" data-toggle="collapse" data-target="#collapseExample">
Toggle
</button>
<div class="collapse" id="collapseExample">
Lorem ipsum
</div>
If you use a <a>
, you must use set href
and data-toggle
:
<a data-toggle="collapse" href="#collapseExample">
Toggle
</a>
<div class="collapse" id="collapseExample">
Lorem ipsum
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.