cssだけで作ったアコーディオン

LastModified
Category CSS

概要

checkboxを使ってcssのみでアコーディンを作る

実装

アコーディオンの中身がリスト

  • 12345
  • ABCDE
  • link


<div class="accordion">
    <label for="menu01">メニュー1</label>
    <input type="checkbox" id="menu01">
    <ul>
        <li>あいうえお</li>
        <li>かきくけこ</li>
        <li><a href="#">リンク</a></li>
    </ul>
    <label for="menu02">メニュー2</label>
    <input type="checkbox" id="menu02">
    <ul>
        <li>12345</li>
        <li>ABCDE</li>
        <li><a href="#">link</a></li>
    </ul>
</div>



.accordion label {
    display: block;
    padding : 15px;
    margin-bottom: 5px;
    color :#fff;
    background: #3a98d1;
    cursor :pointer;
}

.accordion input {
    display: none;
}

.accordion ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.accordion li {
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

.accordion input:checked + ul li {
    height: 36px;
}

アコーディオンの中身がボックス

BOX01

あいうえお

かきくけこ

リンク

BOX02

あいうえお

かきくけこ

リンク



<div class="accordion02">
    <label for="box01">メニュー1</label>
    <input type="checkbox" id="box01">
    <div class="box">
        <h3>BOX01</h3>
        <p>あいうえお</p>
        <p>かきくけこ</p>
        <p><a href="#">リンク</a></p>
    </div>
    <label for="box02">メニュー2</label>
    <input type="checkbox" id="box02">
    <div class="box">
        <h3>BOX02</h3>
        <p>あいうえお</p>
        <p>かきくけこ</p>
        <p><a href="#">リンク</a></p>
    </div>
</div>



.accordion02 label {
    display: block;
    padding : 15px;
    margin-bottom: 5px;
    color :#fff;
    background: #3a98d1;
    cursor :pointer;
}

.accordion02 input {
    display: none;
}

.accordion02 .box {
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

.accordion02 input:checked + .box {
    height: 250px;
    padding : 15px;
    background: #f9f9f9;
    overflow-y: scroll;
}