mk-webwork codenote
<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");
  });
});
← もどる