【CSSだけ】コピペで超簡単!jquery無しでレスポンシブアコーディオン

WEBデザイン制作

よくLPで見かけるQ&AでQを押すとAの文章が開くという仕組み(アコーディオン)のコード紹介です。

今回は第2弾としてさらに簡単に実装できるようにしました。

 

サンプルはこちら

chromeやFireFoxなどのブラウザでデベロッパーツールを使ってスマホ版、PC版それぞれ確認していただけると分かりやすいと思います。

2021/3/6更新
アコーディオン実装方法の記事一覧

仕様

HTMLとCSSコーディングのみで実装(コピペでOK)

必要コード

index.html

<head>内

レスポンシブ化、CSSの読み込み
※重複するコードがあれば適宜自身のコーディングに合わせてください。

<!--▼これはレスポンシブデザインにする為のコードです。▼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
<!--▼CSS読み込み▼-->
<link rel="stylesheet" href="style.css"/>

<body>内

実装コード

<!--↓↓↓アコーディオン実装↓↓↓-->
<details>
<summary>
    ここを押すとアコーディオンが開きます
</summary>
    <div class="answer">
        <p>ここに内容を書きます</p>
    </div>
</details>
<details>
<summary>
    ここを押すとアコーディオンが開きます
</summary>
    <div class="answer">
        <p>ここに内容を書きます</p>
    </div>
</details>
<!--↑↑↑アコーディオン実装↑↑↑-->

 

style.css

/*アコーディオンcss*/
summary{
position: relative;
max-width: 600px;
padding: 10px 50px 10px 20px;
cursor: pointer;
background-color: #353535;
color: #fff;
margin: 10px auto;
}
summary::-webkit-details-marker{
position: absolute;
color: transparent;
}
summary:hover, details[open] summary {
background-color: #804747;
margin-bottom: 0px;
}
summary::after {
content: '+';
font-size: 130%;
position: absolute;
top: 45%;
right: 30px;
transform: translateY(-50%);
transition: transform.5s;
}
details[open] summary::after{
transform:translateY(-50%) rotate(45deg);
}
.answer {
padding: 20px 20px;
background-color: #e6e6e6;
max-width: 630px;
margin: auto;
}
.answer p {
background: none;
}
details[open] .answer{
animation:fadein .5s ease-in-out;
}
@keyframes fadein {
0% { opacity: 0; }
100%{ opacity: 1; }
}
/*アコーディオンcss*/

PCでのアコーディオンの幅を調整するときは「summary」と「.answer」のmax-widthをいじればOKです。

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