JSFiddle - React, Tailwind, and code Playground

by mo nagano

HTML

<section class="top">
<div class="box01">
<di>
<dd class="test01">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
<p>・・・・</p>
</dd>
<dd class="test02">
<p class="fs-22 bold">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
<p class="fs-22">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt class="toggleswitch top-open active"><h5><a href="#">トグルスイッチ</a></h5></dt>
</dl>
</div>
</section>

CSS

.top dt { overflow: hidden; }
.top dt.active:after { background-position: bottom right; }
.top-open { margin: 0 0 2rem 0; }
.top-open:after { display: block; position: absolute; top: 0%; right: 0%; width: 10rem; height: 3rem; 
//パスが通ってないのでコメントアウト
//background: url(../images/search1415.png) no-repeat; background-size: cover; content: ''; 
}

JavaScript

$('dd').hide();
$('.toggleswitch').click(function(){
  //$(this).toggleClass("active");
  //$(this).siblings("dt").removeClass("active");
  //$(this).prev("dd").slideToggle("fast");
  //$(this).next("dd").siblings("dd").slideUp("fast");
  var test01_toggle = function(){
    $("dd.test01").slideToggle("fast",function(){
      if(!$(this).is(':visible'))
    	  $("dd.test02").slideToggle("fast");
    });
  };
  
  if($("dd.test02").is(':visible'))
  	$("dd.test02").slideToggle("fast", test01_toggle);
  else
    test01_toggle();
    
});