toggle width resize animation - jquery

Question

I have <div id="test"></div>and <a id="trigger"></a>. Div has width 300px. I want the div to re size it's width to 100px when user click trigger and want to re size to previous size when user again click the trigger. How can i make this using jquery??

Thanks in advance...:)

blasteralfred

Answer 1

Assign a variable of 1 for click and 0 for unclick and then use the .click function as follows:

$(document).ready(function(){
  TriggerClick = 0;

  $("a#trigger").click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $("div#test").animate({width:'100px'}, 500);
    }else{
         TriggerClick=0;
         $("div#test").animate({width:'300px'}, 500);
    };
  });
});

UPDATE - BETTER ANSWER

I made this suggestion awhile back; but believe there is a more elegant and pragmatic approach to solving this. You could use CSS transitions and have jquery simply add/remove a class that initiates the transition:

Working Fiddle: https://jsfiddle.net/2q0odoLk/

CSS:

#test {
  height: 300px;
  width: 300px;
  background-color: red;

  /* setup the css transitions */
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  transition: width 1s;
}

#test.small {
   width: 100px;
}

jQuery:

$("a#trigger").on('click', function(){
    $("div#test").toggleClass('small');
});

Answer 2

This is Html Part of this toggle:

<div id="start">
    <div class="slide"></div>
</div>

This is CSS part for that:

<style>
    #start{ margin-bottom:60px; display:block; font-size:16px; width:14px; height:79px; position:relative; top:25px; line-height:21px; color:#F0F; background:url(./start1.JPG) left top no-repeat;}    
    .slide{ background:#98bf21; max-width:500px; width:100; height:100px;position:absolute; left:14px;}
</style>
     <script> 
        $(document).ready(function()
        {
            function tog()
            {  
                var w = $(".slide").css('width');

                 if(w=='0px')
                 {
                    $(".slide").animate({
                    width:500
                 });
           }
           else
           {
              $(".slide").animate({
              width:0
              });
           }
        }

        $("#start").click(function()
        {
            tog();
        });
      });
    </script>