jquery - How to make only one div visible at a time -
i've 3 button , each has own box , and these boxes hidden , when press button 1 want box 1 open , when press button 2 the box 1 should automatically closed , show box two.
but i've here press button1 , button 2 both boes being displayed.
hope understood question
my code below
<!--jquery--> $('.btn1').click(function(){ $('.img1').toggle() }); $('.btn2').click(function(){ $('.img2').toggle() }); $('.btn3').click(function(){ $('.img3').toggle() });<!--css--> .btn1, .btn2, .btn3 { border:4px solid; float:left; margin-right: 10px; margin-bottom: 20px; width: 100px; text-align:center; } .img1, .img2, .img3 { border:1px solid; float:left; margin-right: 10px; display:none; width: 100px; text-align:center; } .div { clear:both; }<!--html--> <div class="btn1">button image</div> <div class="btn2">button audio</div> <div class="btn3">button video</div> <div class="div"></div> <div class="img1">image 1</div> <div class="img2">image 2</div> <div class="img3">image 3</div>
make use of custom data-* attributes target corresponding element. first, hide them all, show target
$('[class^="btn"]').click(function(){ $('[class^="img"]').hide(); var target = $(this).attr('data-target') $(target).show(); }); $('.cancel').click(function(){ $('[class^="img"]').hide(); });.btn1, .btn2, .btn3, .cancel { border:4px solid; float:left; margin-right: 10px; margin-bottom: 20px; width: 100px; text-align:center; } .img1, .img2, .img3 { border:1px solid; float:left; margin-right: 10px; display:none; width: 100px; text-align:center; } .div { clear:both; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="btn1" data-target=".img1">button image</div> <div class="btn2" data-target=".img2">button audio</div> <div class="btn3" data-target=".img3">button video</div> <div class="cancel">cancel</div> <div class="img1">image 1</div> <div class="img2">image 2</div> <div class="img3">image 3</div>
Comments
Post a Comment