JQuery - 拡大/縮小幅を切り替えるにはどうすればいいですか？

Question

これまでのところ、幅を拡大するクリック機能がありますが、元の幅に戻す方法はわかりません。縮小すると、.buttonは "詳細を表示"をもう一度読みます。

フィドルリンク： - あなたを助けるスクリプト以下

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

     }); 

Answer 1

は、編集した問題のためのコードとWorking Jsfiddleです。

var clicked = false; 
var previoswidth = 0; 
$('.button').click(function() { 
    $(".button").text("Hide Details"); 
    clicked = !clicked; 
    if (clicked) { 
     previoswidth = $(".expand").width(); 
     $(".expand").animate({ 
      width: "60%" 
     }, { 
      duration: 200, 
      specialEasing: { 
       width: 'linear' 
      } 
     }); 
    } 
    else { 
     $(".expand").animate({ 
      width: previoswidth 
     }, { 
      duration: 200, 
      specialEasing: { 
       width: 'linear' 
      } 
     }); 
    } 
}); 

Answer 2

ここhttps://jsfiddle.net/fpw9apmc/

$('.button').click(function() { 
     $(".button").text("Hide Details"); 
     $(".expand").animate({ 
     width: "60%" 
     }, { 
      duration: 200, 
      specialEasing: { 
       width: 'linear' 
      } 
     }); 
    }); 

Answer 3

FIDDLE HERE

テキストと幅の両方に別々にトグル機能を適用します。それはトリックを行う必要があります

var width = $(".expand").width(); 
$('.button').click(function() { 
    $(this).text(function(i, text) { 
    return text === "Show Details" ? "Hide Details" : "Show Details"; 
    }) 
    var toggleWidth = $(".expand").width() == 0 ? "60%" : "0"; 
    $(".expand").animate({ 
    width: toggleWidth 
    }, { 
    duration: 200, 
    specialEasing: { 
     width: 'linear' 
    } 
    }); 
}); 

Answer 4

これは、CSSトランジションとjQueryを使用してクラスを切り替えることで実行できます。

これであなたのフィドルを更新：https://jsfiddle.net/oykwmj9c/2/

のjQuery：

$('.button').click(function() { 
    if ($(".button").text() == "Show Details") { 
    $(".button").text("Hide Details"); 
    } else { 
    $(".button").text("Show Details"); 
    } 
    $(".expand").toggleClass("expanded"); 
}); 

CSS：

.expand { 
    background-color: red; 
    width: 0; 
    transition: width 1s ease-in-out; 
} 

.expanded { 
    width: 60% 
} 

.button { 
    color: #000; 
    font-size: 2em; 
} 

HTML：

<div class="expand"> 
    <a class="button" href="#">Show Details</a> 
</div>