CODEWITHSUNDEEP
javascripthtmljqueryaccordion
Rebooting
Rebooting

Reputation: 2938

Shifting focus to accordion element when clicked

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

Upvotes: 1

Views: 576

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4415

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

Upvotes: 1

Related Questions