JSFiddle - React, Tailwind, and code Playground

by stalker069

HTML

<div class="task_hours_day">
  <div class="task" data-size="144">
    <div class="content_task">
      <span class="id_task">3121</span>
      <span class="time_task">1h</span>
    </div>
  </div>
  <div class="task" data-size="144">
    <div class="content_task">
      <span class="id_task">3122</span>
      <span class="time_task">1h</span>
    </div>
  </div>
  <div class="task" data-size="144">
    <div class="content_task">
      <span class="id_task">3123</span>
      <span class="time_task">1h</span>
    </div>
  </div>
  <div class="task" data-size="144">
    <div class="content_task">
      <span class="id_task">3124</span>
      <span class="time_task">1h</span>
    </div>
  </div>
</div>

CSS

.task_hours_day{
    width: 100%;
    display:block;
}
.task:first-child { 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.task:last-child { 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.task{
    background:red;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    height: 13vw;
    overflow: hidden;
    margin-left: 5px;
    float: left;
}

JavaScript

//attribu la taille à chaque rectangle
 $('.task').each(function() {
        var size = $(this).attr("data-size");
        $( this ).css('width',size);
});

var stop = false;
//quand on click sur un rectangle
    $('.task').click(function () {
        if(!stop) {
            stop = true;
            //si la tache n'est pas active
            if(!$(this).hasClass('active')){
                var width = $(".active").width();
                var size = $(".active").attr("data-size");
                //si la taille actuelle est différente à la taille de base
                if(size !== width){
                //animation pour réduire la taille
                  $(".active").animate({
                          width: "-=" + size
                      });
                      //supprime la class
                  $('.task').removeClass('active');
                }

                var size_active = $(this).width();
                //ajoute les 20% à la taille
                size_active = size_active * 1.2;
                $(this).addClass('active');
                $('.active').animate({
                    width: "+=" + size_active
                });
            }
           
            stop = false;
        }
    });