How to focus the Accordion top header when we click on that

Question

JS FIDDLE OF MY ACCORDION

I am trying to focus on header or first div which is inside of accordion but it is not working.

In the js fiddle 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 in my case it is showing 11th question of PHP, Actually it should show the first quuestion of PHP how can i achieve it..?

Please see the js fiddle which i have shared.

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

Answer 1

The hierarchical structure of accordions is making the issue little complex in your case. When you open 'question 11' of 'PHP' it scrolls to the first element with '.in' class. The '.in' class is inserted by bootstrap scripts to the active panel body. When 'question 11' is clicked there are two active panel bodies, first containing 11 questions under PHP and second containing answer of question 11.

In this scenario, you need to capture the last panel body with '.in' class.

var panel = $(this).find('.in').last();

If you close the PHP(parent accordion) leaving the questions(child accordion) open, and open parent accordion again it'll scroll to last open child accordion as it is the last element with '.in' class.