JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div id="accordion" class="panel-group seller-deal-mode" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title"> <a id="seller-spot" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Spot
                        <span class="bw-float-right arrow-right "><i class="more-less glyphicon glyphicon-chevron-down"></i></span>
                    </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <p><a data-toggles=".spot-name1" href="#" target="_top">Spot 1</a></p>
        <p><a data-toggles=".spot-name2" href="#" target="_top">Spot 2</a></p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title"> <a id="seller-term" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Term 
                        <span class="bw-float-right arrow-right "><i class="more-less glyphicon glyphicon-chevron-down"></i></span>
                    </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <p><a data-toggles=".term-name1" href="#" target="_top">Term 1</a> </p>
        <p><a data-toggles=".term-name2" href="#" target="_top">Term 2</a></p>
      </div>
    </div>
  </div>
</div>
<div class="seller-deal-mode-right clearfix">
  <div class="term-name1 items">
    <p>Term 1 detail</p>
  </div>
  <div class="term-name2 items">
    <p>Term 2 detail</p>
  </div>
  <div class="spot-name1 items">
    <p> spot 1 detail</p>
  </div>
  <div...

CSS

.items {
  display: none
}

.seller-deal-mode-right {
  width: 50%;
  float: right;
  border: 1px solid red;
}

.panel-bottom {
  border: 1px solid yellow;
}

#accordion {
  width: 50%;
  float: left;
}

JavaScript

$(document).ready(function() {
  $('[data-toggles]').on('click', function() {
    var show = $(this).data('toggles');
    $(show).stop().fadeIn();
    $('.items').not(show).stop().hide();
  });

  $('#seller-term.collapsed').click(function() {
    //$(this).css('border', '1px solid red');
    //$('.seller-deal-mode-right').css('border', '1px solid red');

  });
  $('#seller-term,#seller-spot').click(function() {
    $('.items').hide();
  });


}); //END