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

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.