Keep Active Script Click

Question

I managed to execute a script where when making mouseover(Hover) on a given object, it executes the desired action, but I would like to execute the action with a click and I am unable to do neither with Javascript, nor Jquery...

<script>
        $('.dimmer_area').hover(function(){
            $('.dim_area').fadeIn(200);
        },function(){
            $('.dim_area').fadeOut(200);
        });
    </script>

Can someone help me ?

Answer 1

If you’re using the same action, you can use .fadeToggle(200), which is best suited to the situation, within an event click:

$('.dimmer_area').click(function(){
   $('.dim_area').fadeToggle(200);
});

.dimmer_area{
   width: 200px;
   height: 20px;
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dimmer_area">clique aqui</div>
<div class="dim_area">dim_area</div>

Answer 2

To do with click just add a variable to help control the state, example...

let ativo = false;

$('.dimmer_area').click(function(){
            if(ativo)
            $('.dim_area').fadeIn(200);
            else
            $('.dim_area').fadeOut(200);
            
            ativo = !ativo;
        });

.dimmer_area {
  width: 200px;
  height: 100px;
  background: #424242;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim_area {
  width: 100px;
  height: 50px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="dimmer_area">
  <div class="dim_area">
    
  </div>
</div>