ウェブデザイナーの毎日のお仕事のメモ

作成日:2019.10.02  最終更新日:2021.02.03

CSS

CSSでアコーディオンをつくる方法(jQuery不要)

アコーディオンは、今までjQueryでちゃちゃっとつくっていたのですが、CSSでもつくれる!というメモです。

以前どうしてもjQueryでなくHTML + CSS だけでつくって欲しいと言われた案件があったので、色々なサイトを参考に、つくってみました。

CSSでアコーディオン

下記のようなものをcssでつくりたい場合の作り方です。

押したら、

開く。

これが、今回つくるものの完成図です。

CSSでアコーディオンを実際につくる

HTML

HTMLは、以下の通りです。

accordion_content の部分に、リンクのリストを入れてありますが、

ここに入るものは何でも大丈夫です。

<div class="accordion">
		<input type="checkbox" id="accordion_btn" class="accordion_btn"/>
		<label for="accordion_btn">ここを押したら開きます</label>
		<ul class="accordion_content">
			<li><a href="" class="icon_tri">ページ内リンクなど</a></li>
			<li><a href="" class="icon_tri">ページ内リンクなど</a></li>
			<li><a href="" class="icon_tri">ページ内リンクなど</a></li>
			<li><a href="" class="icon_tri">ページ内リンクなど</a></li>
		</ul>
</div>

CSS

CSSは、以下の通りです。

好みに合わせて、スタイルは変更してください。

.accordion {
    padding: 15px;
    border: 2px solid #71DCB9;
}

.accordion input {
    display:none;
}

.accordion label {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px 20px!important;
    background:#71DCB9;
    color:#fff;
    padding:15px;
}

.accordion label:after {
    content:'open \025bc';
    position:absolute;
    right:15px;
}

.accordion input:checked~label:after {
    content: 'close \025b2';
}

.accordion_content {
    overflow: hidden;
    height: 0;
    -webkit-transition: .8s;
    transition: .8s;
    opacity: 0;
}

.accordion input:checked~.accordion_content {
    overflow: visible;
    height: auto;
    padding-top: 15px;
    opacity: 1;
}

.accordion li {
    margin-bottom:10px;
}

.accordion li:last-child {
    margin-bottom:0;
}

どうしてこのような動きになるのか、仕組みは以下の通りです!

チェックボックスが、ラベルを押下されることによって、チェックが入った状態に切り替わり (.accordion input:checked の部分です。) 、コンテンツの表示非表示と、ラベルの部分のopenとcloseのテキストを切り替えることができるようになっています。

今回つくったサンプルでは、

表示・非表示になっているコンテンツはリンクのリストをいれてありますが、

中身は何でも応用できます。

サンプル

以下、サンプルです。

最新記事