How to focus the top heading of the Accordion when we click on it

Question

JS FIDDLE OF MY ACCORDION

I am trying to focus on the title or the first div that is inside the accordion, but it does not work.

In the js fiddle, html is active by default and consists of 11 questions. And now, by default, PHP crashed, and when we click on it, it will open and HTML will crash.

My problem is that when I click on PHP it shows the last question in my case, it shows the 11th question of PHP . In fact, it should show the first PHP quuestion how can I achieve this ..?

Please see the js script I shared.

I tried 3 different ways, but nobody works:

 $("#panelForPHP").click(function(){ $("#accordionPHP").focus(); }); $("#panelForPHP").click(function(){ $("#collapsePHP1").focus(); }); $("#panelForPHP").click(function(){ $("#panelForPHP").focus(); }); 

Answer 1

To scroll up to the panel pane

 $('#accordionMain').on('shown.bs.collapse', function() { var panel = $(this).find('.in'); $('html, body').animate({ scrollTop: panel.offset().top }); }); 

To scroll to the title bar

 $('#accordionMain').on('shown.bs.collapse', function() { var panel = $(this).find('.in'); $('html, body').animate({ scrollTop: panel.offset().top -55 }); }); 

Answer 2

The hierarchical structure of the accordions makes your question too complex in your case. When you open “question 11” from “PHP”, it scrolls to the first element with the class “.in”. The ".in" class is inserted using boot scripts into the active panel body. When “question 11” is clicked, there are two active panel bodies, first containing 11 questions under PHP and the second containing the answer to question 11.

In this case, you need to remove the last panel body with the class ".in".

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

If you close PHP (parent accordion), leaving the questions (child accordion) open and reopen the parent accordion, it will scroll to the last opened child accordion, since this is the last element with the class “.in”.