<head>
<!-- Webアイコンフォント読み込み -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<details class="details">
<summary class="details-summary icon-arrow">1つ目のアコーディオンのタイトル</summary>
ここは、1つ目のアコーディオンの中身です。
</details>
<details class="details">
<summary class="details-summary icon-img">2つ目のアコーディオンのタイトル</summary>
ここは、2つ目のアコーディオンの中身です。
</details>
<details class="details">
<summary class="details-summary icon-webfont">3つ目のアコーディオンのタイトル</summary>
ここは、3つ目のアコーディオンの中身です。
</details>
/* デフォルトの矢印を削除する */
summary {
display: block;
}
summary::-webkit-details-marker {
display: none;
}
/* アコーディオンのタイトル 共通設定 */
.details-summary {
position: relative;
padding-left: 25px;
font-size: 20px;
cursor: pointer;
}
/* 1つ目のアコーディオンのタイトル CSSのみでカスタマイズ */
.icon-arrow {
&:before {
position: absolute;
content: '';
width: 18px;
height: 18px;
background: #00a5a0;
border-radius: 50%;
top: 50%;
left: 0;
margin-top: -7px;
}
&:after {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
top: 50%;
left: 5px;
transform: rotate(45deg);
margin-top: -1px;
}
}
/* 1つ目のアコーディオンのタイトル オープン時 */
.details[open] .icon-arrow {
&:after {
transform: rotate(135deg);
left: 7px;
}
}
/* 2つ目のアコーディオンのタイトル 画像を使用してカスタマイズ*/
.icon-img {
&:before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 65,35 100,35 75,60 85,95 50,75 15,95 25,60 0,35 35,35' fill='%23ff6600'%3E%3C/polygon%3E%3C/svg%3E");
width: 16px;
height: 16px;
}
}
/* 2つ目のアコーディオンのタイトル オープン時 */
.details[open] .icon-img {
&:before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 65,35 100,35 75,60 85,95 50,75 15,95 25,60 0,35 35,35' fill='%23999999'%3E%3C/polygon%3E%3C/svg%3E");
}
}
/* 3つ目のアコーディオンのタイトル Webフォントアイコンを使用したカスタマイズ*/
.icon-webfont {
&:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
content: '\e812';
font-family: 'Material Icons';
width: 16px;
height: 16px;
}
}
/* 3つ目のアコーディオンのタイトル オープン時 */
.details[open] .icon-webfont {
&:before {
content: '\e7f2';
}
}
/* 以下の記述は不要です */
body {
margin: 20px;
}