JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
   <link rel="stylesheet" href="./css/destyle.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<section class="faq">
		<div class="inner">
			<h3>よくある質問</h3>
			<div class="faq-list">
				<a class="js-accordion" href="javascript:void(0)">
				<dl>
					<dt class="faq-question">Engressはサラリーマンでも学習を続けられるでしょうか？</dt><!-- /.faq-question -->
				</dl></a>
				<dl>
					<dd class="faq-answer">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか？</dd><!-- /.faq-answer -->
					<dd>
						<a class="js-accordion" href="javascript:void(0)">
						<dl>
							<dt class="faq-question">教材はオリジナルのものを使用しているのでしょうか？</dt><!-- /.faq-question -->
						</dl></a>
					</dd>
					<dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer -->
					<dd>
						<a class="js-accordion" href="javascript:void(0)">
						<dl>
							<dt class="faq-question">講師に日本人はいますか？</dt><!-- /.faq-question -->
						</dl></a>
					</dd>
					<dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer -->
					<dd>
						<a class="js-accordion" href="javascript:void(0)">
						<dl>
							<dt class="faq-question">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか？</dt><!-- /.faq-question -->
						</dl></a>
					</dd>
					<dd class="faq-answer">アンサーテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd><!-- /.faq-answer -->
				</dl><!-- /.faq-list -->
			</div><!-- /.inner -->
		</div>
	</section><!-- /.faq -->
  <script async src="//jsfiddle.net/oxvbj4p9/embed/"></script>
</body>
</html>

CSS

.faq-list {
  border-bottom: 1px solid  #1B224C;
}

.faq-question {
  background-color: #fff;
  border-top: 1px solid #1B224C;
  text-align: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 23px 0px;
  margin-top: 15px;
  position: relative;
}

.faq-question:before {
  content: "";
  display: block;
  background-color: #010327;
  position: absolute;
  top: 50%;
  width: 23px;
  height: 3px;
  right: 3px;
}

.faq-question:after {
  content: "";
  display: block;
  background-color: #010327;
  position: absolute;
  top: 50%;
  width: 23px;
  height: 3px;
  right: 3px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  /*  display: block;
                position: absolute;
                top: 50%;
                right: 20px;
                width: 25px;
                height: 3px;
                content: '';
                background-color: #1B224C;
                transition-duration: .3s; */
}

.faq-question:after-close {
  display: none;
}

.faq-answer {
  background-color: #F8F8F8;
  text-align: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 23px 10px 25px;
}

JavaScript

//"js-accordion" 
  $(function(){
    $(".faq-answer:not(:first-child) ").hide();
    $('.js-accordion').on('click',function(){
      $(this).next().slideToggle();
      
      $(".faq-question:after").toggleClass("_close");
      //クリックされていない.faq-questionの_closeクラスを取る
    $('.faq-question:after').not(this).removeClass('_close');
    // 一つ開くと他は閉じるように
    $('.faq-question:after').not($(this)).next('.faq-answer').slideUp();
  })
  
  });