<dl class="accordionList-js">
<dt>テキストが入ります。</dt>
<dd>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</dd>
<dt>テキストが入ります。</dt>
<dd>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</dd>
</dl>
/* アコーディオン */
.accordionList-js dt {
position: relative;
display: block;
margin: 0 auto 5%;
padding: 3% 3% 3% 5%;
background-color: #007095;
border-radius: 15px;
font-size: 18px;
color: #FFF;
cursor: pointer; /* ← */
}
.accordionList-js dt:after {
content: "";
position: absolute;
inset: 0;
margin: auto 1em auto auto;
width: 1em;
height: 1em;
background-image: url(../img/icon_plus.png);
background-size: 1em 1em;
background-repeat: no-repeat;
}
.accordionList-js dt.active:after {
background-image: url(../img/icon_minus.png);
}
.accordionList-js dd {
display: none; /* ← */
margin-bottom: 20px;
padding: 0 10px 10px;
}
$(function() {
$(".accordionList-js dt").click(function () {
$(this).next().slideToggle("fast");
$(this).toggleClass("active");
});
});