JSFiddle - React, Tailwind, and code Playground

by mayuripatil185

HTML

<div id="outerdiv">
    <div class="innerdiv">a</div>
    <div class="innerdiv">b</div>
    <div class="innerdiv">c</div>
    <div class="innerdiv">d</div>
    <div class="innerdiv">e</div>
    <div class="innerdiv">f</div>
    <div class="innerdiv">g</div>
    <div class="innerdiv">h</div>
    <div class="innerdiv">i</div>
    <div class="innerdiv">j</div>
    <div class="innerdiv">k</div>
    <div class="innerdiv">l</div>
    <div class="innerdiv">m</div>
    <div class="innerdiv">n</div>
</div>

CSS

.innerdiv {
    width: 100px;
    background-color: #FF0000;
    float:left;
    height: 100px;
  
    margin:2px;
}
#outerdiv {
    width: 540px;
}

JavaScript

$(".innerdiv").on("click", function () {
    // alert("hello");  
    var elm = $(this);
    console.log(elm.offset());
    $(".innerdiv").animate({
        width: "100px"
    });
   // console.log(elm)
    $(this).animate({
        width: "200px"
    });

})