Bootstrap Accordion show what is clicked on the top

Question

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> 

Answer 1

I just adding a condition when the question isn't the first because got the parent title give a space -50px . I added a fake class inside <a> to help us to known the parents clicked before scroll... etc

 $("#panelForPHP").click(function() { $("#accordionPHP").focus(); }); $("#panelForPHP").click(function() { $("#collapsePHP1").focus(); }); $("#panelForPHP").click(function() { $("#panelForPHP").focus(); }); $('.panel-heading').on('click', function() { //console.log("TEST TEST : " + $(this).find('h4 a').prop('class')); if ($(this).find('h4 a').prop('class') === 'parents') { //console.log("ok parent"); var target = $(this).find('h4 a').prop('class'); //console.log("target = " + target) /* le sélecteur $(html, body) permet de corriger un bug sur chrome et safari (webkit) */ $('html, body') // on arrête toutes les animations en cours .stop() /* on fait maintenant l'animation vers le haut (scrollTop) vers notre ancre target */ .animate({ scrollTop: $('.' + target).offset().top }, 1000); } else { //console.log($(this).prop('class')); // console.log(typeof parseInt($(this).find('b').text())) if ($(this).find('b').text() != 1 && ($(this).find('h4 a').prop('class') !== 'parents')) { $('html,body').animate({ scrollTop: $(this).offset().top - 50 }, 800); } else if ($(this).find('h4 a').prop('class') !== 'parents') { $('html,body').animate({ scrollTop: $(this).offset().top }, 800); } } }); 

 .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 class="parents"><span class="circle"><b>HTML</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> <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 class="parents"><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> <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 class="parents"><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> <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 class="parents"><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> </div> 

Answer 2

can you see this fiddle ? I think it will help.

 $("#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); }); 

 .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> 

I have added scrollTop jQuery function. Nothing else.