KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

jQueryのtoggleを使わずアコーディオンを実装して高速化

2018/04/26
Category :
  1. JavaScript
Tags :
  1. 自作

最近jQueryのtoggleを使用してアコーディオンを実装していると下記が気になり始めた・・・

  1. クリックした回数分、律儀にトグルするので高橋名人ばりの16連打には到底耐えられない。
  2. トグルされる中身が充実している時など動きがもっさりする

色々ググってみるとCSS3のみでなどやり方が何種類かあるみたいでしたが

  1. ある一定以上の高さになると高さがおかしい。
  2. CSSが少々複雑になり個人的に作りが気持ち悪い。

動作を気持ちよくし連続トグルの問題が解決出来ればよいのでCSS3のみではなく少々のJavaScriptで自作。
トグル以外の箇所も毎回同じ処理を施すので内部的に記述。

自作CSS3系toggleの仕様
  1. トグルトリガー部分の次にくるコンテンツが必ずトグルする。
  2. トグルされた状態(開いている状態は)ではトグルトリガー部分とトグルコンテンツ部分に.state-activeが付加される。
  3. CSS3アニメのライブラリはvelocity.jsを使用。

HTML

装飾用にクラスが色々ついていますが.jsToggle次のコンテンツがトグルされる事にになります。
この辺はjQueryのtoggleを使用するのと同じ感じで大丈夫。

<ul class="list-toggle">
    <li>
        <a href="#" class="jsToggle list-toggle-a">KEPRATEってなんて読むのですか?</a><!--ここがクリックされる箇所 -->
        <div class="list-toggle-con"><!--ここがトグルされる箇所 -->
            <div class="list-toggle-con-inner">
                <p class="fs-m">ケプレイトと読みます。<br>ちなみにgoogleでケプレイトを検索をかけても一切引っかかりません。<span class="f-bold fs-l"
                >「もしかしてケプラート」</span>など言われる始末です。<br>ケプレイトでも検索されるようにがんばります。<br>ちなみにkeprateで検索しても知らない外国人の方がたくさんHITします。もちろん本人ではございません。日本語の方もちろん大丈夫ですのでご安心ください。</p>
            </div>
        </div>
    </li>
</ul>

</body>直前にjsファイルを読み込み以下を記述。
自作のtoggleCSS3()関数を呼び出すのみ。

  1. jQueryとvelocity.jsは各自用意してください。
<script src="./assets/js/lib.js"></script>;<!--lib.jsに必要なライブラリを格納しています -->
<script src="./assets/js/toggle-css3.js"></script>
<script>
    $(function() {
        $(".jsToggle").on("click", function() {
            $(this).toggleCSS3();
            return false;
        });
    });
</script>

CSS

以下重要な箇所のcss。
jQueryのtoggle系display:none;を指定していましたが
自作版高さを0にし、overflowをhiddenに設定して見える範囲をマスクな感じにしています。

  1. JavaScriptで本来の高さを取得します。
.list-toggle-con {
    height: 0;
    overflow: hidden;
}

JavaScript

ポイントとして10行目から13行目で

トグルされるコンテンツの高さを0からautoに変更して本来の高さを取得して再度0に戻しCSS3アニメーションさせます。

あとはstate-activeのクラスをadd,removeしているだけです。

;
(function($) {

    $.fn.toggleCSS3 = function() {

        var toggleCon = $(this).next();

        if (!toggleCon.hasClass('state-active')) {

            toggleCon.css('height', 'auto');
            var h = toggleCon.innerHeight();
            toggleCon.css('height', 0);
            toggleCon.stop().velocity({ height: h }, 300, "easeInQuad");

            toggleCon.addClass("state-active");

        } else {

            toggleCon.stop().velocity({ height: 0 }, 300, "easeInQuad");

            toggleCon.removeClass("state-active");

        }
    };

})(jQuery);

これでトグルもっさり生活から抜け出せそうです・・・

  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/toggle-css3/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP