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>

<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>

.list-toggle-con {
    height: 0;
    overflow: hidden;
}

;
(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);