Jnsn_ Jnsn_ - 7 months ago 41
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'
                }
            });
            }

        });