JSFiddle https://jsfiddle.net/3ah26cvq/
In the JSFiddle by default HTML is active and it consist of 11 questions in it. And now PHP by default it is collapsed, and when we click on it, it will open, and HTML will collapse.
My problem is when I click on PHP it is showing the last question of PHP.! In my case it is Focusing (showing) 11th question of PHP, Actually it should Focus (show) the PHP title because we clicked it.! How can I achieve it.?
Related to the above JSFiddle
I have tried with 3 different ways but none are working:
$("#panelForPHP").click(function(){ $("#accordionPHP").focus(); });
$("#panelForPHP").click(function(){ $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function(){ $("#panelForPHP").focus(); });
In short what every I click it should focus on the screen how can I do that?
$("#panelForPHP").click(function(){ $("#accordionPHP").focus(); });
$("#panelForPHP").click(function(){ $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function(){ $("#panelForPHP").focus(); });.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;
}<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" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a> </h4> </div>
<div id="collapseHTML4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a> </h4> </div>
<div id="collapseHTML5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a> </h4> </div>
<div id="collapseHTML6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a> </h4> </div>
<div id="collapseHTML7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a> </h4> </div>
<div id="collapseHTML8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a> </h4> </div>
<div id="collapseHTML9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a> </h4> </div>
<div id="collapseHTML10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a> </h4> </div>
<div id="collapseHTML11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* HTML END */ ?>
<?php /* PHP */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapsePHP" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>P</b></span>PHP</a> </h4> </div>
<div id="collapsePHP" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionPHP">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP1">
<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="collapsePHP1" 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="#accordionPHP" href="#collapsePHP2">
<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="collapsePHP2" 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="#accordionPHP" href="#collapsePHP3">
<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="collapsePHP3" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a> </h4> </div>
<div id="collapsePHP4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a> </h4> </div>
<div id="collapsePHP5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a> </h4> </div>
<div id="collapsePHP6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a> </h4> </div>
<div id="collapsePHP7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a> </h4> </div>
<div id="collapsePHP8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a> </h4> </div>
<div id="collapsePHP9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a> </h4> </div>
<div id="collapsePHP10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a> </h4> </div>
<div id="collapsePHP11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* PHP END */ ?>
<?php /* JAVASCRIPT */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseJavaScript" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>JS</b></span>JAVASCRIPT</a> </h4> </div>
<div id="collapseJavaScript" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionJavaScript">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionJavaScript" href="#collapseJavaScript1">
<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="collapseJavaScript1" 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="#accordionJavaScript" href="#collapseJavaScript2">
<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="collapseJavaScript2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* JAVASCRIPT END */ ?>
<?php /* MYSQL */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseMYSQL" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>SQL</b></span>MYSQL</a> </h4> </div>
<div id="collapseMYSQL" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionMYSQL">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionMYSQL" href="#collapseMYSQL1">
<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="collapseMYSQL1" 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="#accordionMYSQL" href="#collapseMYSQL2">
<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="collapseMYSQL2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* MYSQL END */ ?>
</div>