そして伝説になりたかった

働きたくない男の雑記・備忘録

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

投稿日:2019/1/21 最終更新日:2020/05/12 閲覧数:3890

カテゴリー: WEB>

アコーディオン

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

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

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

イライラするアコーディオン
知らないところに置き去りにされてストレスマッハの図


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

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




デモ

見出し1

テキストテキストテキストテキストテキストテキストテキストテキスト

見出し2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す