【今さら聞けない】超簡単なアコーディオンメニューの作り方！

<div class="accordion">
	<button type="button" class="accordion__button js-accordion">バナナはおやつに入りますか？</button>
	<p class="accordion__content">はい。保冷バックに入れてきてください。</p>
</div>
<div class="accordion">
	<button type="button" class="accordion__button js-accordion">おやつは何円までですか？</button>
	<p class="accordion__content">300円までです。</p>
</div>
<div class="accordion">
	<button type="button" class="accordion__button js-accordion">遠足に車を使ってもいいですか？</button>
	<p class="accordion__content">自分の足で歩いてきてください。</p>
</div>

.accordion {
  border-bottom: 1px solid #000;
  text-align: left;
}

.accordion__button {
  display: block;
  padding: 20px 40px;
  position: relative;
  text-align: left;
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.accordion__button::before,
.accordion__content::before {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 0;
  line-height: 28px;
  font-weight: 700;
  position: absolute;
  text-align: center;
  color: #fff;
}

.accordion__button::before {
  content: "Q";
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #ff7f3e;
}

.accordion__content {
  /* 非表示にする */
  display: none;
  padding-left: 40px;
  padding-bottom: 20px;
  position: relative;
}

.accordion__content::before {
  content: "A";
  top: 0;
  background-color: #ffda78;
}

$(".js-accordion").click(function () {
  $(".accordion__content").slideToggle();
});

.accordion__content {
  /* 非表示にする */
  display: none;
  padding-left: 40px;
  padding-bottom: 20px;
  position: relative;
}

$('.js-accordion').click(function(){
	$(this).next().slideToggle();
});