【コピペで実装】アコーディオン ＋ オートスクロールでストレスフリーなUI

FAQコーナーや、思いの外コンテンツが長くなってしまったときにしばしば用いられるアコーディオン。

スマホ版のwikiなんかにも長い文章を隠しておくのに使われています。

私はアコーディオン方式のコンテンツが好きなんですけども、見てておかしいと思いません？あの「下にある閉じるボタンを押すと置き去りにされる現象」を。

知らないところに置き去りにされてストレスマッハの図

あれされるとストレスマッハなので、閉じると同時にオートスクロールするようにしました。

理屈としては、 1.チェックボックスを作ってチェックされたら開くような箱を作る
2.チェックボックスに対応するラベルを作る
3.ラベルにはクリックで発火するjsを仕込み、そのjsで元の位置までオートスクロール
といった具合です。

デモ

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accList">
    <input type="checkbox" id="label01">
    <h2 id="f1">見出し1</h2>
    <div>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <label for="label01" class="btn" onclick="inputClick('#f1')"></label>
    </div>
 
    <input type="checkbox" id="label02">
    <h2 id="f2">見出し2</h2>
    <div>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <label for="label02" class="btn" onclick="inputClick('#f2')"></label>
    </div>
</div>

css

div.accList input {
    display: none;
}
div.accList h2 {
    margin: 8px 0 4px 0;
    border-bottom: 2px solid #058;
    padding-bottom: 8px;
    text-align: center;
}
div.accList div {
    position: relative;
    max-height: 40px;
    overflow: hidden;
    transition: 0.5s;
    margin: 4px 16px 20px 16px;
    padding-top: 40px;
    padding-bottom: 0px;
}
div.accList div label::before {
    content: "開く ▽";
    position: absolute;
    bottom: 0px;
    left: 0;
    display: inline-block;
    width: 124px;
    text-align: center;
    border: 1px solid #333;
    color: #333;
    background-color: #fff;
    padding: 4px 8px;
    z-index: 500;
}
div.accList input:checked + h2 + div {
    max-height: 800px;
    padding-bottom: 40px;
}
div.accList input:checked + h2 + div label::before {
    content: "閉じる △";
}

js

//アコーディオンと同時にスクロール
function inputClick(ID){
    var position = jQuery(ID).offset().top;
    jQuery("html,body").animate({
        scrollTop : position - 80 //スクロール位置調整
    }, {
        queue : false
    });
};