アコーディオンパネル（子要素の高さを保持）をつくってみた

##まえがき
コーディングを主で対応するようになって1年ほどの新米コーダーです。
自分なりの勉強や改善を備忘録として記録してます。
##実装
アコーディオンパネル実装

アコーディオンパネルの中の要素でlineHeightを使用したかったので、display: none;ではなく親要素をheight: 0;とoverflow: hidden;にして実装をしてます。
##ソースコード

HTML

<div class="js-accordion">
    <div class="accordionTrigger">ボタン1</div>
    <div class="accordionPanel">
        <div class="inner">
        	<a href="#">パネル1</a>
        </div>
    </div>
</div>

SCSS

.js-accordion {
	.accordionTrigger {
		//ボタンのスタイル
	}
	.accordionPanel {
		//パネルのスタイル
		height: 0;
		overflow: hidden;
		transition: .4s height;
		.inner {
			//パネル内のスタイル
		}
	}
}

非表示は.accordionPanelをheight: 0;とoverflow: hidden;でおこないます。
overflow: hidden;ではみ出している部分も非表示にします。
.accordionPanelにmarginやpaddingの値を設定すると非表示時にその数値分余白が空いてしまうので、余白を空けるには子要素の.innerで設定をします。

親要素の高さを０にしても子要素の高さは０にならない特性を使用してます。
そのため、lineHeightなど高さが必要なjs（jQuery）が使えます。

jQuery

$(function(){
 var objAccordion = $('.js-accordion').children('.accordionTrigger');
    var FlagAccordionSingleDoor = 'js-accordion_singledoor';
    objAccordion.on('click',function(){
        var target_h = $(this).next().children().innerHeight() + 1;
        var panel = $(this).next();
        var parent = $(this).parent().parent();
        if(!parent.hasClass(FlagAccordionSingleDoor)) {
            if(panel.hasClass('show')) {
                if(!(panel.is(':animated'))){
                    $(this).removeClass('show');
                    panel.height(0).removeClass('show');
                }
            } else {
                if(!(panel.is(':animated'))){
                    $(this).addClass('show');
                    panel.height(target_h).addClass('show');
                }
            }
        } else {
            if(panel.hasClass('show')) { //片開き
                if(!(panel.is(':animated'))){
                    $(this).removeClass('show');
                    panel.height(0).removeClass('show');
                }
            } else {
                if(!(panel.is(':animated'))){
                    $(this).addClass('show').parent().siblings().find('.accordionTrigger').removeClass('show');
                    panel.height(target_h).addClass('show');
                    $(this).parent().siblings().find('.accordionPanel').height(0).removeClass('show');
                }
            }
        }
    });
});

js-accordion_singledoorを付けると開閉が連動するアコーディオンパネルになります。

var target_h = $(this).next().children().innerHeight() + 1;
子要素の高さを取得します。取得した高さに対して＋１しているのは、ボーダー分の太さになります。ボーダーの太さが3pxで設定の場合は、＋３に変更します。

if(!parent.hasClass(FlagAccordionSingleDoor)) {
js-accordion_singledoorをクラスとして持っているかで開閉連動のアコーディオンパネルか分岐をかけます。

if(!(panel.is(':animated'))){
アニメーション中はクリックしても動作しないようにアニメーションを監視してます。
##最後に
下層ページの共通部分として使用したかったため、今回作成をしました。
下層ページは自分以外のコーダーが入る予定で、各々記述をすると運用がやりずらくなるため開閉連動パターンも同じ記述にしてます。

ブラッシュアップしてもっと汎用的にしていきたいとおもいます！
##使用バージョン

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>