How To Apply On Click Action On Images In Javascript/jquery?

I have a fiddle which I have replicated by seeing the screenshot below: At this moment, I am able to replicate everything in fiddle from the design. The snippets of CSS codes whi

Solution 1:

Give your images unique id and hide all but one default details image. Then you attach event handler to each div that toggles image visible attribute based on id.

$('.sections').on('click', function(e) {
     val section = e.target.id;
     $('.sections').hide(); // hide all sections
     $('#' + section).show(); // display only clicked one
 });

Solution 2:

Just a quick glance of what you can do. Set event listener that will listen for click on the mentioned images and then, inside of the passed callback function, change the css properties of another element using element.style.cssProperty such as display to change it from none to block.

const cbBtn = document.querySelector('div#cloud');
const container = document.querySelector('div.container');

cbBtn.addEventListener('click', event => {
  container.style.display = 'block';

  cbBtn.className = 'active';
});

div#cloud {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border: 1px solid black;
  line-height: 100px;
  text-align: center;
}
div#cloud:hover {
  background-color: green;
  color: white;
}
div.container {
  width: 100%;
  height: 200px;
  background: #ccc;
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 200px;
}

.active {
  background-color: green;
  color: white;
}

<divid="cloud">
  Cloud Based
</div><divclass="container">
  CONTAINER CONTENT
</div>