JSFiddle - React, Tailwind, and code Playground

by taoist

JavaScript

$(document).ready(function(){

    activeItem = $("#accordion li:first"); // Selects the first li
    $(activeItem).addClass('active');      // adds a different class hence creating the default animation where the first element is extended.

    $("#accordion li").hover(function(){ // selects ALL the chidren of the #accordion element that are li's 
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});  /* selects the activeItem and animates on hover....
  keep in mind that the default of activeItem is li:first, but since we selected ALL li's this can change based on what we hover over and
  it does....as we will see below */
        $(this).animate({width: "450px"}, {duration:300, queue:false}); //Animate the li element you are hovering over ( which is what 'this' is)
         activeItem = this;          //'this' gets assigned to whatever element you are hovering over and the cycle repeats.
          
    });
 
});