jquery - 2つの矢印アイコンを使用してdivをアニメーション化するには、1つは開くためのもので、もう1つは閉じるためのものですか？

Question

途中でjqueryanimateを使用してdivアニメーションを実行していますが、これを続行するには誰でも役立ちます。

私の要件は、矢印アイコンをクリックしたときにdivがアニメーション化する必要があることです。アニメーションのdivの折りたたみ後、折りたたまれた場所を閉じるために左側の矢印を表示する必要があります。

2つの画像を追加しました。1つは開くためのもので、もう1つは閉じるためのものです。

JsFiddleリンク

http://jsfiddle.net/CZpdF/1/

Answer 1

$("#buying-power-right, #buying-power-left").click(function() {
    $(this).attr('id', function() {
        return this.id == 'buying-power-right' ? "buying-power-left" : "buying-power-right";
    });
    $("#buying-power-content").animate({
        width: 800
    }, {
        queue: false,
        duration: 200
    }).toggle();
});

デモ

Answer 2

#buying-power-contentもっているdisplay:none;

クリックイベントで表示する必要があります。

$("#buying-power-content").show().animate({width:800}, { queue: false, duration: 200 });