[コピペでOK!]CSSのみで作るアコーディオンメニュー[サンプル3種]

2021.10.13

CSSのみで作るアコーディオンメニューの様々なサンプル集です。
気が向いた時に追加していきます。

コード自体の詳細や解説は以下の元記事をご覧ください。

[CSSのみ]簡単に作れるアコーディオンメニュー
CSSのみでアコーディオンメニューを作成します。要素の高さを固定せず、レスポンシブ対応です。サンプル集も作りました。サンプル この...
mirailog.jp
2021.10.05

コードの利用は自己責任でお願いします。

シンプル

要素に合わせた高さになります。
レスポンシブ対応です。
画像なども入ります。
閉じる時にアニメーションが一瞬なのは仕様です。
高さオートの場合にはどうしてもこうなってしまいます。
開閉両方にアニメーションを設定したい場合は高さを固定するかJavaScriptを使いましょう。 
<div class="ac1">
    <dl>
        <input id="ac1-1" type="checkbox">
        <label for="ac1-1">
            <dt>
                タイトル１
            </dt>
        </label>
        <dd>
            内容１
        </dd>
    </dl>

    <dl>
        <input id="ac1-2" type="checkbox">
        <label for="ac1-2">
            <dt>
                タイトル２
            </dt>
        </label>
        <dd>
            内容２
        </dd>
    </dl>

    <dl>
        <input id="ac1-3" type="checkbox">
        <label for="ac1-3">
            <dt>
                タイトル３
            </dt>
        </label>
        <dd>
            内容３
        </dd>
    </dl>
</div>
/* ac1 */
.ac1 dl,
.ac1 dt,
.ac1 dd {
    margin: 0;
    padding: 0;
}

.ac1 dl+dl {
    margin-top: 1rem;
}

.ac1 dt,
.ac1 dd {
    padding: 10px;
}

.ac1 dl {
    position: relative;
    overflow: hidden;
}

.ac1 dl>input {
    display: none;
}

.ac1 dt {
    position: relative;
    z-index: 1;
    padding-right: 40px;
    cursor: pointer;
    background: #e6e6e6;
    transition: .4;
    border: solid 1px #adadad;
}

.ac1 dd {
    position: absolute;
    visibility: hidden;
    transform: translateY(-100%);
    transition: .4s;
    background: #f5f5f5;
    border: solid 1px #adadad;
    border-top: none;
}

.ac1 dl>input:checked+label+dd {
    position: relative;
    visibility: visible;
    transform: translateY(0);
}

.ac1 dt::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    top: 50%;
    right: 10px;
    background: #666;
    transform: translateY(-50%);
}

.ac1 dt::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 3px;
    background: #666;
    transition: .4s;
    transform: translateY(-50%) rotate(90deg);
}

.ac1 dl>input:checked+label>dt::after {
    transform: translateY(-50%) rotate(180deg);
}

プラスじゃなくて三角

要素に合わせた高さになります。
レスポンシブ対応です。
画像なども入ります。
閉じる時にアニメーションが一瞬なのは仕様です。
高さオートの場合にはどうしてもこうなってしまいます。
開閉両方にアニメーションを設定したい場合は高さを固定するかJavaScriptを使いましょう。 
<div class="ac2">
    <dl>
        <input id="ac2-1" type="checkbox">
        <label for="ac2-1">
            <dt>
                タイトル１
            </dt>
        </label>
        <dd>
            内容１
        </dd>
    </dl>

    <dl>
        <input id="ac2-2" type="checkbox">
        <label for="ac2-2">
            <dt>
                タイトル２
            </dt>
        </label>
        <dd>
            内容２
        </dd>
    </dl>

    <dl>
        <input id="ac2-3" type="checkbox">
        <label for="ac2-3">
            <dt>
                タイトル３
            </dt>
        </label>
        <dd>
            内容３
        </dd>
    </dl>
</div>

/* ac2 */
.ac2 dl,
.ac2 dt,
.ac2 dd {
margin: 0;
padding: 0;
}

.ac2 dl+dl {
margin-top: 1rem;
}

.ac2 dt,
.ac2 dd {
padding: 10px;
}

.ac2 dl {
position: relative;
overflow: hidden;
}

.ac2 dl>input {
display: none;
}

.ac2 dt {
position: relative;
z-index: 1;
padding-right: 40px;
cursor: pointer;
background: #e6e6e6;
transition: .4;
border: solid 1px #adadad;
}

.ac2 dd {
position: absolute;
visibility: hidden;
transform: translateY(-100%);
transition: .4s;
background: #f5f5f5;
border: solid 1px #adadad;
border-top: none;
}

.ac2 dl>input:checked+label+dd {
position: relative;
visibility: visible;
transform: translateY(0);
}

.ac2 dt::before {
content: ”;
position: absolute;
top: 50%;
right: 10px;
border-style: solid;
border-width: 17.3px 10px 0 10px;
border-color: #666 transparent transparent transparent;
transform: translateY(-50%);
transition: .4s;
}

.ac2 dl>input:checked+label>dt::before {
transform: translateY(-50%) rotate(180deg);
}

Q＆A風

A 要素に合わせた高さになります。
レスポンシブ対応です。
A 画像なども入ります。
A 閉じる時にアニメーションが一瞬なのは仕様です。
高さオートの場合にはどうしてもこうなってしまいます。
開閉両方にアニメーションを設定したい場合は高さを固定するかJavaScriptを使いましょう。 
<div class="ac3">
    <dl>
        <input id="ac3-1" type="checkbox">
        <label for="ac3-1">
            <dt>
                <span>Q</span>
                タイトル１
            </dt>
        </label>
        <dd>
            <span>A</span>
            内容１
        </dd>
    </dl>

    <dl>
        <input id="ac3-2" type="checkbox">
        <label for="ac3-2">
            <dt>
                <span>Q</span>
                タイトル２
            </dt>
        </label>
        <dd>
            <span>A</span>
            内容２
        </dd>
    </dl>

    <dl>
        <input id="ac3-3" type="checkbox">
        <label for="ac3-3">
            <dt>
                <span>Q</span>
                タイトル３
            </dt>
        </label>
        <dd>
            <span>A</span>
            内容３
        </dd>
    </dl>
</div>

/* ac3 */
.ac3 dl,
.ac3 dt,
.ac3 dd {
margin: 0;
padding: 0;
}

.ac3 dl+dl {
margin-top: 1rem;
}

.ac3 dt,
.ac3 dd {
padding: 10px;
}

.ac3 dl {
position: relative;
overflow: hidden;
}

.ac3 dl>input {
display: none;
}

.ac3 dt {
position: relative;
z-index: 1;
padding-right: 40px;
padding-left: 2.5em;
cursor: pointer;
background: #e6e6e6;
transition: .4;
border: solid 1px #adadad;
}

.ac3 dd {
position: absolute;
visibility: hidden;
transform: translateY(-100%);
transition: .4s;
background: #f5f5f5;
border: solid 1px #adadad;
border-top: none;
padding-left: 2.5em;
}

.ac3 dl>input:checked+label+dd {
position: relative;
visibility: visible;
transform: translateY(0);
}

.ac3 dt::before {
content: ”;
position: absolute;
width: 20px;
height: 3px;
top: 50%;
right: 10px;
background: #666;
transform: translateY(-50%);
}

.ac3 dt::after {
content: ”;
position: absolute;
top: 50%;
right: 10px;
width: 20px;
height: 3px;
background: #666;
transition: .4s;
transform: translateY(-50%) rotate(90deg);
}

.ac3 dl>input:checked+label>dt::after {
transform: translateY(-50%) rotate(180deg);
}

.ac3 dt span,
.ac3 dd span {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
top: 50%;
left: .5em;
width: 1.5em;
height: 1.5em;
transform: translateY(-50%);
border: solid 1px #adadad;
}

.ac3 dd span {
top: 10px;
transform: translateY(0);
}

タイトルとURLをコピーしました