Javascript Question
JQuery - How to toggle expanding/shrinking width?
I have so far a click function that expands the width but not sure how to toggle shrink it back to it's original width. Upon shrink, .button should read "Show details" again.
Fiddle Link: https://jsfiddle.net/fpw9apmc/
$('.button').click(function() {
$(".button").text("Hide Details");
$(".expand").animate({
width: "60%"
}, {
duration: 200,
specialEasing: {
width: 'linear'
}
});
});
Answer
Here is the edited code for your problem and Working Jsfiddle -
$('.button').click(function() {
var btnText = $(this).text();
if(btnText === "Hide Details"){
$(this).text("Show Details");
$(".expand").animate({
width: 0
}, {
duration: 200,
specialEasing: {
width: 'linear'
}
});
}else{
$(this).text("Hide Details");
$(".expand").animate({
width: "60%"
}, {
duration: 200,
specialEasing: {
width: 'linear'
}
});
}
});
Source (Stackoverflow)