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');
});
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With