JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="panel-group" id="accordionMain">
				<?php	/* HTML */ ?>
				<div class="panel panel-default"  >  
					<div class="panel-heading panel_heading_bg" style="cursor:pointer" data-toggle="collapse" data-parent="#accordionMain" href="#collapseHTML"> 
						<h4 class="panel-title "><a><span class="circle"><b>H</b></span>HTML</a> </h4> 
					</div>
					<div id="collapseHTML" class="panel-collapse collapse in " style="cursor:pointer"> 
						<div class="panel-body ">
							<div class="panel-group" id="accordionHTML">
								<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML1" >  <div class="panel-heading panel_heading_bg" style="cursor:pointer"> <h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div> <div id="collapseHTML1" class="panel-collapse collapse '+collap+' " style="cursor:pointer"> <div class="panel-body ">answer1</div> </div> </div>
								
								<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML2" >  <div class="panel-heading panel_heading_bg" style="cursor:pointer"> <h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div> <div id="collapseHTML2" class="panel-collapse collapse '+collap+' " style="cursor:pointer"> <div class="panel-body ">answer2</div> </div> </div> 
								
								<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML3" >  <div class="panel-heading panel_heading_bg" style="cursor:pointer"> <h4 class="panel-title "><a><span class="circle"><b>2</b></span>question3</a> </h4> </div> <div id="collapseHTML3"...

CSS

.circle {
			width: auto;
			height: 23px;
			text-align:top;
			float: right;
			background: #ffff00;
			color: #fff;
			color: black;
			padding-top: 3px;
			margin-right: -15px;
			margin-top: -10px;
			border-bottom-left-radius: 500%;
			font-size: 11px;
			padding-left: 7px;
			padding-right: 7px;
			}
			
			.panel_heading_bg {
			background-color: #122c5f !important;
			color: white !important;
			}

JavaScript

$("#panelForPHP").click(function(){		$("#accordionPHP").focus(); });
	$("#panelForPHP").click(function(){	    $("#collapsePHP1").focus(); });
	$("#panelForPHP").click(function(){	    $("#panelForPHP").focus(); });
  
  $('.panel-heading').on('click', function(){
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    });