Care Code
こんにちは、まっすです。
私は独学でWebサイト制作の学習を始め、当初は相談する人がおらず遠回りして学習をしておりました。。。
現在は周りに相談できる方も多くなりました。みなさんありがとうございますm(_ _)m
本題です！
Webサイトでよく見るアコーディオンの実装。横に「＋」があってクリックすると下にシャーと伸びて内容が見れるやつです。
あれって初心者では「？？？」になりませんか？
今回はそんなアコーディオンの実装について紹介します。
思っているより簡単なコードで実装することができるんですよ！
アコーディオンの実装コードを紹介
私は普段、Notionを利用してCode Snippetページを作ってコードを管理しています。
今回はわかりやすいようにCodePenを利用して紹介します。
CodePenでのアコーディオンデモ
CodePenでは見にくい方もいると思うので、コードも記載しておきます。
アコーディオンのHTMLコード
<div class="accordion">
<h2 class="accordion__title">募集業種</h2>
<!-- /.accordion__title -->
<ul class="accordion__list">
<li class="accordion__item">
<h3 class="description__title">1.Webディレクター</h3>
<!-- /.description__title -->
<div class="description__body">
<dl class="description__def">
<dt class="description__tit">仕事内容</dt>
<!-- /.description__tit -->
<dd class="description__data">テキストテキストテキスト</dd>
<!-- /.description__data -->
<dt class="description__tit">応募資格</dt>
<!-- /.description__tit -->
<dd class="description__data">
テキストテキストテキストテキストテキストテキスト
</dd>
<!-- /.description__data -->
<dt class="description__tit">必須スキル</dt>
<!-- /.description__tit -->
<dd class="description__data">テキストテキストテキスト</dd>
<!-- /.description__data -->
<dt class="description__tit">給与</dt>
<!-- /.description__tit -->
<dd class="description__data">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<!-- /.description__data -->
<dt class="description__tit">休日・休暇</dt>
<!-- /.description__tit -->
<dd class="description__data">テキストテキストテキスト</dd>
<!-- /.description__data -->
<dt class="description__tit">雇用形態</dt>
<!-- /.description__tit -->
<dd class="description__data">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</dd>
<!-- /.description__data -->
<dt class="description__tit">勤務時間</dt>
<!-- /.description__tit -->
<dd class="description__data">テキストテキストテキスト</dd>
<!-- /.description__data -->
<dt class="description__tit">勤務地</dt>
<!-- /.description__tit -->
<dd class="description__data">テキストテキストテキスト</dd>
<!-- /.description__data -->
</dl>
<!-- /.description__def -->
</div>
<!-- /.description__body -->
</li>
<!-- /.accordion__item -->
<!-- ここからはliの中の繰り返し -->
</ul>
<!-- /.accordion__list -->
</div>
<!-- /.accordion -->アコーディオンのCSSコード
.accordion {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 30px 60px;
background-color: #e6dada;
}
.accordion__title {
font-size: 24px;
font-weight: bold;
padding-top: 20px;
margin-bottom: 10px;
}
.accordion__list {
padding-top: 10px;
margin-left: 10px;
}
.accordion__item {
border-top: 1px solid #333;
}
.accordion__item--last {
border-bottom: 1px solid #333;
}
.description__title {
position: relative;
font-size: 20px;
font-weight: bold;
padding: 30px 40px;
cursor: pointer;
transition: all 0.3s;
}
.description__title::before,
.description__title::after {
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
right: 1%;
width: 20px;
height: 1px;
background-color: #333;
transition: all 0.3s;
}
.description__title::after {
transform: rotate(90deg);
}
.description__title:hover {
background-color: #e3b5b5;
}
.description__title.js-open {
background-color: #e3b5b5;
}
.description__title.js-open::before {
transform: rotate(45deg);
}
.description__title.js-open::after {
transform: rotate(-45deg);
}
.description__body {
padding: 10px 20px;
display: none;
}
.description__def {
display: flex;
flex-wrap: wrap;
}
.description__tit {
width: 100%;
margin-bottom: 20px;
}
.description__data {
width: 100%;
margin-bottom: 20px;
}
@media screen and (min-width: 577px) {
.description__tit {
width: 20%;
padding-top: 20px;
margin-bottom: 40px;
}
.description__data {
width: 80%;
padding-top: 20px;
margin-bottom: 40px;
}
}アコーディオンのjQuery
"use strict";
$(function () {
/**
* アコーディオンの開閉
*/
$(".description__title").on("click", function () {
// slideToggleでdisply:block,noneをコントロール
$(this).next().slideToggle(1000);
$(this).toggleClass("js-open");
});
});
コード自体は長いですが、記述しているHTMLやCSSは簡単ですよね。
しかもjQueryの記述なんて少しでいけるんです！
アコーディオンは難しくない？なんて思わないでぜひ一度お試しください！
twitter(@massut3t)もやっていますので、ぜひフォローやDMよろしくお願いします。
