JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<!-- Bootstrap-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.hotzbuy.com/bootstrap/css/bootstrap.min.css" />

<script src="https://cdn.hotzbuy.com/bootstrap/js/bootstrap.min.js"></script>



<!-- 內容 -->

<div id="divStep1" data-toggle="collapse"  aria-expanded="false" class="collapse show" >
 <a class="btn btn-primary" data-toggle="collapse" data-target="#divA1" href="#divStep1, #divA1" role="button" aria-expanded="false">問題A</a>
 <a class="btn btn-primary" data-toggle="collapse" data-target="#divStep1,#divB1" href="#" role="button" aria-expanded="false">問題B</a>
</div>


<div id="divA1" class="collapse  multi-collapseA1" style='background:red;color:white' >

 <a class="btn btn-danger" data-toggle="collapse" data-target=".multi-collapseA1" href="#divA11" role="button" aria-expanded="false">問題A1</a>
 
  <a class="btn btn-danger" data-toggle="collapse" data-target=".multi-collapseA1" href="#divA12" role="button" aria-expanded="false">問題A2</a>
  
</div>

<div id="divB1" class="collapse  multi-collapseB1" style='background:green;color:white'>

<a class="btn btn-success" data-toggle="collapse" data-target=".multi-collapseB1" href="#divB11" role="button" aria-expanded="false">問題B1</a>
 
  <a class="btn btn-success" data-toggle="collapse" data-target=".multi-collapseB1" href="#divB12" role="button" aria-expanded="false">問題B2</a>
</div>