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
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');
});
