how to make image1 show when div1 is clicked, image2 replaces image1 when div2 is clicked?

Question

HTML-

<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without
    having to switch between applications.</p></h3></div>
    </div>
    <div class="floatright" >
    <img class="integration" id="image1" src="integrations1-image.png" width="100%" height="auto">
    <img class="integration" id=iamge2" src="integrations2-image.png" width="100%" height="auto">       </div>
    <div style="clear: both;">
</div>
</div>

CSS-

.border{
  border-left:6px solid #3793EE;
  text-align: left;
  padding-left: 5%;
  }
div.JShover{
    height:50%;
    text-align: left;
    opacity:0.2; 
}
.wrap {
    overflow: hidden;
    margin: auto;
    max-width: 700px;
}
.floatleft {
    float:left; 
    width: 50%;
    height: 500px;

}

.floatright {
    float: right;
    height: 500px;

   width: 50%;
}

JS-

<script>
    $(".JShover").click(function() {
    this.style.opacity = 1
        });

The images are in the same div. The text is however in different divs. I want to use JS so that when div1 is clicked show image1 and when div2 is clicked show image2. The text divs are in one container called floatleft and both the images are in floatright. I have to give id's to both images, use visibility:hidden for images when text is not clicked. Unable to implement this in JS.

Answer 1

You can use

$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image

So your code would be something like this

$('#div1').on('click', function(){
   $('#image2').hide(); // to hide image
   $('#image1').show(); // to show image
})

$('#div2').on('click', function(){
   $('#image1').hide(); // to hide image
   $('#image2').show(); // to show image
})

Answer 2

First of all you must check which div is clicked,getting its index using the index() jQuery function:

 if($(this).index() == 0)

Note that we start comptabilisation elements from 0 and not from 1

after that you have just to select the relative img using the :eq() :

if($(this).index() == 0){
  $("img:eq(0)").show();
  $("img:eq(1)").hide();
}else{
  $("img:eq(0)").hide();
  $("img:eq(1)").show();
}

Finally, here is a DEMO:

 $(".JShover").on("click",function(){ if($(this).index() == 0){ $("img:eq(0)").show(); $("img:eq(1)").hide(); }else{ $("img:eq(0)").hide(); $("img:eq(1)").show(); } }); 

 .border{ border-left:6px solid #3793EE; text-align: left; padding-left: 5%; } div.JShover{ height:50%; text-align: left; opacity:0.2; } .wrap { overflow: hidden; margin: auto; max-width: 700px; } .floatleft { float:left; width: 50%; height: 500px; } .floatright { float: right; height: 500px; width: 50%; } div.JShover:hover,.border:hover{ opacity:1; color:blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="floatleft"> <div class="JShover"> <h3 class="border">Works with your business applications <p >Connect with Office 365, GSuite.</p></h3> </div> <div class="JShover"> <h3 class="border">Works with your business applications <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without having to switch between applications.</p></h3></div> </div> <div class="floatright" > <img class="integration" id="image1" src="https://image.flaticon.com/icons/svg/578/578320.svg" width="100%" height="auto" style="display:none"> <img class="integration" id="iamge2" src="https://image.flaticon.com/icons/svg/578/578457.svg" width="100%" height="auto" style="display:none"> </div> <div style="clear: both;"> </div> </div> 

Answer 3

You can use the below. Comments below in code.

$(".JShover").click(function () {
    this.style.opacity = 1;
    $(".integration").hide();  //Hide all images
    //Only show the image related to the div "JShover" clicked
    $(".integration").eq($(this).index()).show(); 
});

 $(function () { $(".integration").hide(); //Hide all images $(".JShover").click(function () { $(".JShover").css('opacity', '0.2'); this.style.opacity = 1; $(".integration").hide(); //Hide all images //Only show the image related to the div "JShover" clicked $(".integration").eq($(this).index()).show(); }); }); 

 .border { border-left: 6px solid #3793EE; text-align: left; padding-left: 5%; } div.JShover { height: 50%; text-align: left; opacity: 0.2; } .wrap { overflow: hidden; margin: auto; max-width: 700px; } .floatleft { float: left; width: 50%; height: 500px; } .floatright { float: right; height: 500px; width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrap"> <div class="floatleft"> <div class="JShover"> <h3 class="border">Works with your business applications <p>Connect with Office 365, GSuite.</p> </h3> </div> <div class="JShover"> <h3 class="border">Works with your business applications <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without having to switch between applications.</p> </h3> </div> </div> <div class="floatright"> <img class="integration" src="integrations1-image.png" width="100%" height="auto" alt="Image1"> <img class="integration" src="integrations2-image.png " width="100% " height="auto" alt="Image2"> </div> <div style="clear: both;"></div> </div>