CODEWITHSUNDEEP
javascriptjquerycss
Kieron Garvey
Kieron Garvey

Reputation: 15

CSS/Javascript/Jquery: Show/Hide a DIV Depending on one of two images being clicked

I've got 2 images, Image_A and Image_B. I also have 2 Div's, Div_A and Div_B which are both hidden when page loads.

If Image_A is clicked, then I need show Div_A. But ig Image_B is then clicked I need to hide Div_A and show Div_B.

This should work the other way also, so there is only ever one div showing if an image is clicked

Can this be achieved with pure css only? Or if I do it in Javascript/Jquery???

Thanks

Upvotes: 1

Views: 301

Answers (3)

Alfred
Alfred

Reputation: 21406

you may set your css as;

#img_1, #img_2{
visibility: hidden;
}

and in your JavaScript;

$('#img_1').click(function() {
  $('#div_1').css({"visibility":"visible"});
  $('#div_2').css({"visibility":"hidden"});
});

$('#img_2').click(function() {
  $('#div_2').css({"visibility":"visible"});
  $('#div_1').css({"visibility":"hidden"});
});

Here is a working demo.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

$('#img_1').on('click', function() {
  $('#div_1').show();
  $('#div_2').hide();
});

$('#img_2').on('click', function() {
  $('#div_1').hide();
  $('#div_2').show();
});

Upvotes: 1

josh shadowfax
josh shadowfax

Reputation: 304

You can do it in Javascript or Jquery by putting event handlers each image and changing the visibility of the divs in the called functions.

Not sure about doing it in pure css.

Upvotes: 0

Related Questions