JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<dl class="p-faq">
  <dt class="p-faq-title">保険は効きますか？？</dt>
  <dd class="p-faq-description">はい！効きますよ。</dd>
  <dt class="p-faq-title">女性スタッフはいらっしゃいますか？？？</dt>
  <dd class="p-faq-description">はい！おりますよ！</dd>
  <dt class="p-faq-title">予約は何ですればいいですか？？</dt>
  <dd class="p-faq-description">お電話のみの受付となっております！。</dd>
  <dt class="p-faq-title">年末年始や祝日などは営業していますか？？</dt>
  <dd class="p-faq-description">不定休なので、公式Twitterをご覧になってみてください！。</dd> 
</dl>

CSS

.p-faq{
  
}

.p-faq-title{
  position: relative;
  padding: 8px;
  border-bottom: solid 1px #333;
  cursor: pointer;
}

.p-faq-title::after{
  position: absolute;
  top: 50%;
  right:10px;
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: translate(0, -50%) rotate(135deg);
  transform-origin: center;
}

.p-faq-title.active::after{
  transform:translate(0, -50%) rotate(-45deg);
}

.p-faq-description{
  display: none;
  margin: 0 0 24px;
  padding: 8px;
}

.p-faq-description.active{
  display: block;
}

JavaScript

$('.p-faq-title').on('click', function(){
	$('.p-faq-title').removeClass('active');
  $('.p-faq-description').slideUp();

	$(this).next().slideDown();
});