jQuery Accordion with long content force scroll to top when clicked

Hi, I am using very simple jQuery Accordion code which works very well. But when the content is longer I am having a issue. What I mean is for example if the accordion tab 2 has more content and when another tab is clicked the I have scroll to top to see that content.

here is a preview of page I am talking about, Its a development site

http://dev.delviesplastics.com/

So if you any other Accordion tab than the first one you will that you have scroll to top see its content, and its really bad on mobile devices.

I am trying to make it go to the clicked tab without having to scroll. Any advice is appreciated.

Thanks
LVL 2
niceoneishereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Try adding this to your .accordion-header.click
$('html,body').animate({scrollTop: $(this).offset().top}, 200);

Open in new window

Handler would then be as follows:
  $('.accordion-header').click(function () {
    $('html,body').animate({scrollTop: $(this).offset().top}, 200); /* ADD THIS */
    if($(this).is('.inactive-header')) {
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
      $(this).toggleClass('active-header').toggleClass('inactive-header');
      $(this).next().slideToggle().toggleClass('open-content');
    }
    else {
      $(this).toggleClass('active-header').toggleClass('inactive-header');
      $(this).next().slideToggle().toggleClass('open-content');
    }
  });

Open in new window

0
niceoneishereAuthor Commented:
Thanks for replying I added that piece of code but no effect its not scrolling to the top, You can see it in the link posted I updated the code.
0
Julian HansenCommented:
Probably because the slideToggle is not complete - try putting the animate inside the slideToggle complete callback like so
  $('.accordion-header').click(function () {
	var current = $(this);
    if($(this).is('.inactive-header')) {
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
      $(this).toggleClass('active-header').toggleClass('inactive-header');
      $(this).next().slideToggle(function() {
			$('html,body').animate({scrollTop: $(current).offset().top}, 200);
	  }).toggleClass('open-content');
    }
    else {
      $(this).toggleClass('active-header').toggleClass('inactive-header');
      $(this).next().slideToggle(function(){
			$('html,body').animate({scrollTop: $(current).offset().top}, 200);
	  }).toggleClass('open-content');
    }
  });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
niceoneishereAuthor Commented:
Brilliant That worked thanks
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.