How can i do onclick event with html,css,js Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How can i do onclick event with html,css,js without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I want the css codes of the blog1popup class to change when the image is clicked. I know how to do this with hover, but i don’t know how to make this action happen by clicking.

The element I want to use as this button;

<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
   <div class="blog-item">
      <div class="img">
         <img src="assets/img/blog-grid-1.jpg" alt=""></a>
         <a href="" class="date"> <span class="day">14</span> <span class="month">April</span></a>
      </div>
      <a href="" class="title padding-30px"  style="margin-top: -1rem;">Fransa Geneline Islak Mendil İhracı</a> 
      <p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
   </div>
</div>

This is the element I want to have changes in the css codes.

<div class="blog1popup"></div>

Example on hover technique;

.blog-item:hover > .blog1popup{
opacity: 100%;
}

Answer

You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.

Eg.

$(".blog-item").on("click", function (e) {
  $(".blog1popup").css("opacity", "100%");
  $(".blog1popup").addClass("any-class");
});
We are here to answer your question about How can i do onclick event with html,css,js - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji