[SOLVED] side element animat toggle

side element animat toggle

How can I do that, if someone clicks on the rectangle on the right, then this rectangle will be longer e.g. 400 px and if you click on it again, the rectangle will be smaller again

  <div class="nebenmenu"><i class="fa fa-css3"></i>
  </div>

jQuery Cods

$(document).ready(function(){
   $(".nebenmenu").click(function(){
      $(this).animate({width:"200px"} ,500)
   }, function(){
      $(this).animate({width:"55px"} ,500)

   })
})

Solution

you could store the information if its toggled in a data attribute, sth. like:

    $(document).ready(function(){
       $(".nebenmenu").click(function(){ 
          var toggle = $(this).attr('data-toggle');
          if(!toggle){ console.log("toggle")
             $(this).animate({width:"200px"} ,500);
             $(this).attr("data-toggle",true)
          }else { console.log("nottoggle")
             $(this).animate({width:"55px"} ,500);
             $(this).removeAttr("data-toggle")
          }
       })
    })

.nebenmenu {
width:55px;
height:55px;
border:1px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nebenmenu" ><i class="fa fa-css3"></i>
    </div>