JSFiddle - React, Tailwind, and code Playground

HTML

<div id="qwrapper">
  
  <div id="btn1" class="accordionButton"> <span style="margin-left: 6px;">id = btn1</span> </div>
  <div class="accordionContent">
    <div class="textContent">

      <div id="btn1s1" class="accordionButton2"><span style="margin-left: 6px;">id = btn1s1</span></div>
      <div class="accordionContent2">
        <div class="textContent">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architectoment.</p>
        </div>
      </div>

      <div id="btn1s2" class="accordionButton2"><span style="margin-left: 6px;">id = btn1s2</span></div>
      <div class="accordionContent2">
        <div class="textContent">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
        </div>
      </div>

      <div id="btn1s3" class="accordionButton2"><span style="margin-left: 6px;">id = btn1s3</span></div>
      <div class="accordionContent2">
        <div class="textContent">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
        </div>
      </div>

</div>
</div>
    
    <div id="greenArrow"></div>

CSS

#qwrapper {
	width: 100%;
  overflow: hidden;
	}

@-moz-document url-prefix() { 
  #qwrapper {
     padding-top: 52px;
  }
}

#qwrapper .accordionButton{
  font-size:14px;
}
#qwrapper .accordionButton2{
  font-size:14px;
}


.accordionButton {
width: 100%;
height: 35px;
float: left;
background: #0098c3;
border-top: 2px solid #fff;
cursor: pointer;
padding-left: 30px;
padding-top: 5px;
text-decoration: none;
color: white;
font-family: Georgia;
font-weight: bold;
margin-bottom: -5px;
}
	
.accordionButton2 {
width: 100%;
height: 27px;
float: left;
background: #B6B6B6;
border-bottom: 2px solid #fff;
cursor: pointer;
padding-left: 70px;
padding-top: 6px;
text-decoration: none;
color: white;
font-family: Georgia;
font-weight: bold;
margin-left: -40px;
	}
	
.accordionContent {	
	width: 100%;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #ececec;
  border-top: 2px solid white;
	}
	
.accordionContent2 {	
	width: 100%;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #ececec;
 
        }
  
.textContent{
	margin-left: 35px;
font-size: 14px;
width: 95%;
        }

.textContent a{
   color: black;
   text-decoration: underline;
        }
	




#greenArrow{
z-index: 2001;
position: absolute;
top: 163px;
left: 291px;
    height:30px;
        width:30px;
    background: green;
}

JavaScript

$("div.accordionContent2").hide();
$(function() {
  
function subClick()
  {
   if ($(this).next().is(":hidden"))
    {
        var arrowName = $(this).attr('id') + "Arrow()";
      
        function btn1s1Arrow() {$( "#greenArrow" ).animate({top: "203px", left: "291px"}, "normal" );}
        function btn1s2Arrow() {$( "#greenArrow" ).animate({top: "345px", left: "381px"}, "normal" );}
        function btn1s3Arrow() {$( "#greenArrow" ).animate({top: "444px", left: "391px"}, "normal" );}
      
       $("#qwrapper .accordionContent2").slideUp('normal');
       $(this).next().slideDown('normal');
       
        arrowName();
    }
  else
    {
      $("#qwrapper .accordionContent2").slideUp('normal');
    }
  }


    
$("div.accordionButton2").click(subClick);
  
});