单击时将焦点转移到手风琴元素

Question

I have this accrodion: http://jsfiddle.net/ksqzg3Ld/

P.S: Dont remove the <br> tags. They have been put intentionally

I want to shift the focus to the accordion element when clicked. For eg: When Accordion section #2 or Accordion section #3 is clicked, the scroll should automatically go down and focus on the accordion section data. Is there any way to achieve this?

Essentially, my accordion will be displayed on my web page with half of it visible to the user from the bottom. I dont want the user to scroll down by himself to read the accordion element data when the element is clicked

 $(document).ready(function(){
     $('.accordion-section-title').click(function(e){
         var currentAttrvalue = $(this).attr('href');
         if($(e.target).is('.active')){
             $(this).removeClass('active');
             $('.accordion-section-content:visible').slideUp(300);
         } else {
             $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
             $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
         }
     });
 });

Answer 1

Add this line at the end of the click function: $("html, body").animate({scrollTop: $(currentAttrvalue).offset().top - 10}, 0);

 $(document).ready(function(){ $('.accordion-section-title').click(function(e){ var currentAttrvalue = $(this).attr('href'); if($(e.target).is('.active')){ $(this).removeClass('active'); $('.accordion-section-content:visible').slideUp(300); } else { $('.accordion-section-title').removeClass('active').filter(this).addClass('active'); $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300); } $("html, body").animate({scrollTop: $(currentAttrvalue).offset().top - 10}, 0); }); });