how to make a show/hide toggle button with jquery
Hi I have been trying to make a show/hide toggle button with jquery but I can only find buttons that show a div but none that hide it
below is one of the examples I found that shows a div but it doesn't let you hide it unless you click on another button. I would like to be able to use the same button to show and hide a div. I have multiple divs on my page and would like to be able to use jquery instead of javascript.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
</head>
<body>
<div id="buttonsDiv">
<input type="button" id="button1" class="buttons" value="div1"></input>
<input type="button" id="button2" class="buttons" value="div2"></input>
<input type="button" id="button3" class="buttons" value="div3"></input>
<input type="button" id="button4" class="buttons" value="div4"></input>
</div>
<div>
<div id="div1" style="display:none">
Hello World开发者_StackOverflow社区
</div>
<div id="div2" style="display:none">
Test
</div>
<div id="div3" style="display:none">
Another Test
</div>
<div id="div4" style="display:none">
Final Test
</div>
</div>
</body>
</html>
Try this
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings().hide("slow");
});
Even simpler use control's own toggle function.
$('.toggleButtons').click(function()
{
$('control1, control2, ...').toggle();
});
That's a pretty simple script to make:
$('.buttons').click(function()
{
var elementToShowOrHide = $('#' + $(this).val());
if(elementToShowOrHide.is(':visible'))
elementToShowOrHide.hide();
else
elementToShowOrHide.show();
});
Each click on the button would then toggle the visibility of the other element.
Demo
$(document).ready(function(){
$(".buttons").click(function () {
var div= $("#"+this.value);
div.toggle("slow").siblings().hide("slow");
});
});
That should do it.
EDIT:
credit for toggle goes to @AtoMerZ. He had it first.
Switch your script with this:
<script>
$(document).ready(function(){
$(".buttons").click(function () {
$("#buttonsDiv div").hide()
var divname= this.value;
$("#"+divname).show();
});
});
</script>
The jQuery .toggle() method should help you:
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).toggle();
});
Source: http://api.jquery.com/toggle/
You can use the toggle method for showing and hiding an element. This will show/hide each div individually:
$(".buttons").click(function () {
$("#" + this.value).toggle("slow");
});
Assuming that you want all the other divs to be hidden when the new one is shown:
$('.buttons').click(
function() {
$('div > div').hide();
$('div > div').eq($(this).index()).show();
});
JS Fiddle demo.
加载中,请稍侯......
精彩评论