CSS / Javascript / Jquery：根据单击的两个图像之一显示/隐藏DIV

Question

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

Answer 1

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

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

Answer 2

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.

Answer 3

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.