How to change the content with click of an image in Javascript?

Question

I have a fiddle in which I want to apply some logic in it.

On clicking of Franchise Hub image, I want the desktop screen and the text next to it should appear with the phone screen below and the content next to it getting hidden .

Whereas on clicking of Cloud Based and Mobile , I want the mobile screen and the text next to it should appear with the tv screen and the content next to it getting hidden .

Javascript:

The Javascript code which I have tried in order to achieve the above logic is:

const cbBtn = document.querySelector('img#franchise-hub');

const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad');

cbBtn.addEventListener('click', event => {
cloudbasedtextipad.style.display = 'block';
cbBtn.className = 'active';
});

Problem Statement:

I am wondering what changes I should make in the Javascript code above so that on clicking different images, different contents should appear.

 const cbBtn = document.querySelector('img#franchise-hub'); const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad'); cbBtn.addEventListener('click', event => { cloudbasedtextipad.style.display = 'block'; cbBtn.className = 'active'; }); 

 .product-contents { margin-left: 15%; margin-right: 15%; display: flex; justify-content: space-between; background-color: #f0f0f0; align-items: center; padding: 1rem; margin-bottom: 5%; } .product-contents .product { width: 10%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); background-color: white; border-radius: 10px } .product-contents .product #franchise-hub { margin-bottom: 22%; } .product-contents .product #cloud-based-mobile { margin-bottom: 30%; } .product-contents .product #business-analytics { margin-bottom: 28%; } .product-contents .product #tech-support { margin-bottom: 27%; } .product-contents .product #order-management { margin-bottom: 27%; } .product-contents .product #employee-management { margin-bottom: 18%; } .product-contents .product #white-label { margin-bottom: 15%; } .product-contents .product #brand-control { margin-bottom: 20%; } .product-contents .product #lead-tracking { margin-bottom: 28%; } .product-contents .product #custom-invoicing { margin-bottom: 27%; } .product-contents .product #goal-setting { margin-bottom: 26%; } .product-contents .product #customization-tools { margin-bottom: 27%; } .product-contents .product #royalty-calculator { margin-bottom: 27%; } .product-contents .product #email-marketing { margin-bottom: 24%; } .ipads { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .tvs { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .cloud-based-text { width: 50%; } .franchise-hub-text { width: 50%; } div.cloudbasedtextipad { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } div.franchisehubtv { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; } 

 <div class="product-contents"> <div class="product"> <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; color: rgb(58, 59, 60);">Franchise Hub</p> </div> <div class="product" style="background-color:green;border:0;"> <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: white;">Cloud Based & Mobile</p> </div> </div> <div class="cloudbasedtextipad"> <div class="cloud-based-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="ipads"> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> </div> </div> <div class="franchisehubtv"> <div class="franchise-hub-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="tvs"> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> </div> </div> 

Answer 1

Selection Colour Toggle Implemented as well.

 $("#mobile").click(function() { if ($('.cloudbasedtextipad').css('display') == "flex") { $('.cloudbasedtextipad').css('display', 'none'); $('#mobile').css('background-color', 'lightgray'); $('#desktop').css('background-color', 'lightgray'); } else { $('.cloudbasedtextipad').css('display', 'flex'); $('#mobile').css('background-color', 'green'); $('#desktop').css('background-color', 'lightgray'); $('.franchisehubtv').css('display', 'none'); } }); $("#desktop").click(function() { if ($('.franchisehubtv').css('display') == "flex") { $('.franchisehubtv').css('display', 'none'); $('#desktop').css('background-color', 'lightgray'); $('#mobile').css('background-color', 'lightgray'); } else { $('.franchisehubtv').css('display', 'flex'); $('.cloudbasedtextipad').css('display', 'none'); $('#desktop').css('background-color', 'green'); $('#mobile').css('background-color', 'lightgray'); } }); 

 .product-contents { margin-left: 15%; margin-right: 15%; display: flex; justify-content: space-between; background-color: #f0f0f0; align-items: center; padding: 1rem; margin-bottom: 5%; } .product-contents .product { width: 10%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); background-color: white; border-radius: 10px } .product-contents .product #franchise-hub { margin-bottom: 22%; } .product-contents .product #cloud-based-mobile { margin-bottom: 30%; } .product-contents .product #business-analytics { margin-bottom: 28%; } .product-contents .product #tech-support { margin-bottom: 27%; } .product-contents .product #order-management { margin-bottom: 27%; } .product-contents .product #employee-management { margin-bottom: 18%; } .product-contents .product #white-label { margin-bottom: 15%; } .product-contents .product #brand-control { margin-bottom: 20%; } .product-contents .product #lead-tracking { margin-bottom: 28%; } .product-contents .product #custom-invoicing { margin-bottom: 27%; } .product-contents .product #goal-setting { margin-bottom: 26%; } .product-contents .product #customization-tools { margin-bottom: 27%; } .product-contents .product #royalty-calculator { margin-bottom: 27%; } .product-contents .product #email-marketing { margin-bottom: 24%; } .ipads { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .tvs { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .cloud-based-text { width: 50%; } .franchise-hub-text { width: 50%; } div.cloudbasedtextipad { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } div.franchisehubtv { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="product-contents"> <div class="product" id="mobile"> <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; color: rgb(58, 59, 60);">Franchise Hub</p> </div> <div class="product" id="desktop" style="background-color:green"> <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; ">Cloud Based & Mobile</p> </div> </div> <div class="cloudbasedtextipad" style="display:none;"> <div class="cloud-based-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="ipads"> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> </div> </div> <div class="franchisehubtv" style="display:flex;"> <div class="franchise-hub-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="tvs"> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> </div> </div> 

Answer 2

I implement the first case only. You have to learn how to implement the second one. First, the CSS for div.cloudbasedtextipad changed to

div.cloudbasedtextipad
{   
display: none;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}

And the javascript changed as the following:

    const cbBtn = document.querySelector('img#franchise-hub');

    const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad');

    cbBtn.addEventListener('click', event => {
        cloudbasedtextipad.style.display = 'flex';
    });