CODEWITHSUNDEEP
javascriptjquery
user1481850
user1481850

Reputation: 248

show and hide divs using jquery?

I have two links and 2 divs. I want to show div 1 while div 2 is hidden. and when I show div 2, I want div 1 to be hidden. I tried to write this code but it seem not working.(only the first part. videos div is hidden)

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {
   $('#videos').hide();
 });

$('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
});

    $('#show_videos').click(function(){
        $('#images').hide();
        $('#videos').show();
    });

    </script>
    <a id="show_images" class="button" href="#">Images</a>
    <a id="show_videos" class="button" href="#">Videos</a>

<div id="images" class="images"></div>
<div id="videos" class="videos"></div>

Upvotes: 0

Views: 2605

Answers (4)

gaurang171
gaurang171

Reputation: 9090

There is another alternate way for above query:

$(function(){
   $('#show_images').click(function(){
      $('#videos').hide();
      $('#images').show();
  });
  $('#show_videos').click(function(){
        $('#images').hide();
        $('#videos').show();
  });
  $('#show_images').trigger('click');
});

You can try above solution on codebins http://codebins.com/codes/home/4ldqpbm

Upvotes: 0

nico
nico

Reputation: 51680

The other solutions work perfectly, but here is a shorter version

$(document).ready(function()
   {
   $('#videos').hide();

   $('[id^=show_]').click(function(){
      $('#videos').toggle();
      $('#images').toggle();
      });
   });

Upvotes: 1

coolguy
coolguy

Reputation: 7954

$(document).ready(function() {
   $('#videos').hide();


$('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
});

$('#show_videos').click(function(){
    $('#images').hide();
    $('#videos').show();
});
}); //close document ready here

Upvotes: 0

xdazz
xdazz

Reputation: 160963

Put the code which bind click handler into the dom ready callback, or the code executes when the two div are not ready.

$(document).ready(function() {
   $('#videos').hide();

  $('#show_images').click(function(){
    $('#videos').hide();
    $('#images').show();
  });

  $('#show_videos').click(function(){
    $('#images').hide();
    $('#videos').show();
  });
});

Upvotes: 3

Related Questions