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>
Post a Comment for "How To Apply On Click Action On Images In Javascript/jquery?"