jquery - Jquery アコーディオン - 元の状態に戻る

Question

CSS Tricks で見つけたアコーディオン メニューを修正しましたが、正常に動作していますが、現在の (展開された) ヘッダーが 2 回クリックされたときに、アコーディオンが元の状態に戻るようにしたいと考えています。アコーディオンが閉じ、元の開始幅が認識されます。

私はcodepenの例を持っています...これに喜んで挑戦してくれる人に感謝します! 私はそれを理解しようとして斜視になります。

http://codepen.io/Sektion66/pen/vAGsn

ありがとう！

Answer 1

コードのデモ ( http://jsfiddle.net/h3Kbu/1/show/ ) および ( http://jsfiddle.net/h3Kbu/1/ ) として動作します。基本的elseに一部は新しいコードです。

if (!$el.hasClass("current")) {

        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt").not(this);

        // close all info cells
        $allCells.slideUp();

        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        });

        // animate current title to larger size            
        $el.animate({
            "font-size": "20px",
            paddingTop: 10,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        }).next().slideDown();

        // make the current column the large size
        $parentWrap.animate({
            width: 425
        })

        // make other columns the small size
        $otherWraps.animate({
            width: 250
        })

        // make sure the correct column is current
        $allTitles.removeClass("current");
        $el.addClass("current"); 
    }else{
        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt");

        // close all info cells
        $allCells.slideUp();

        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 12
        });

        // animate current title to larger size            


        // make the current column the large size
        $parentWrap.animate({
            width: 250
        })

        // make other columns the small size
        $otherWraps.animate({
            width: 250
        })

        // make sure the correct column is current
        $allTitles.removeClass("current");
       // $el.addClass("current"); 
    }