How to show hide div with jquery

Question

I have this markup that is dynamically generated. However when there is two divs generated i want a button that will toggle between the two. here is my code.

<div class="threeSixtyContainer">

     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>

</div>

How could i add a toggle button which would toggle between the two divs. so one is hidden press the button and it gets changed to display block and the other gets display hidden.

possible duplicate of [toggle visibility of div jquery javascript](http://stackoverflow.com/questions/18050761/toggle-visibility-of-div-jquery-javascript) — Liam, Dec 16 '13 at 17:13

score 2 · Answer 1 · answered Dec 16 '13 at 16:15

2

when you have a button with id #button , you can use following code:

$('#button').click(function(){
    $('.toggle').toggle();
});

if you make sure one is visible, and one is hidden as initial state. this will work perfectly

answered Dec 16 '13 at 16:15

Kristof Feys

1,822
1
19
36

Andre Figueiredo · Answer 2 · 2013-12-18T15:10:25.783

1

I prefer hide all & after show current. It's friendly to addition of future elements and is a simple/straightforward way to say "leave only this button visible!".

CSS:

.toggle {
    display: none;
}

Javascript:

$(document).ready(function(){
    $('.toggle').first().show();

    $([button]).click(function(){
        $('.toggle').hide();
        $(this).show();
    });
});

edited Dec 18 '13 at 15:10

answered Dec 16 '13 at 16:17

Andre Figueiredo

12,930
8
48
74

score 1 · Answer 3 · answered Dec 16 '13 at 16:18

1

$(document).ready(function() {
  $('.toggle:first-child').hide();
  $('#toggle-button').click(function() {
    $('.toggle').toggle();
  });
});

Provided your button has toggle-button as an id.

answered Dec 16 '13 at 16:18

Samuel Bolduc

18,163
7
34
55

fusion27 · Answer 4 · 2013-12-16T16:33:48.577

Kinda shooting from the hip here.

<div class="threeSixtyContainer">
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
     <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>
     <a href="javascript:;" id="button">Toggle</a>
</div>

And your JS:

$(document).ready(function() {
    $('#button').on('click',function(){
        objToggle = $('.toggle');
        if(objToggle.eq(0).is(':visible')){
            objToggle.eq(0).hide();
            objToggle.eq(1).show();
        } else {
            objToggle.eq(1).hide();
            objToggle.eq(0).show();
        }
    });
});

score 0 · Answer 5 · answered Dec 16 '13 at 16:18

<div class="threeSixtyContainer">

 <div class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Blue.swf" type="application/x-shockwave-flash" width="500"></div>
 <div style="display:none;" class="toggle"><embed height="350" flashvars="site=lexmoto" pluginspage="http://www.adobe.com/go/getflashplayer" src="models/ZS125-50/360/ZS125-50_Black.swf" type="application/x-shockwave-flash" width="500"></div>

javascript:

$('#togglebutton').click(function(){
    $('.toggle').toggle();
});

How to show hide div with jquery

5 Answers5