I added both tab navs and accordions to different areas on a webpage to try them out for content options.

I set everything up properly.

When I test them as a user on the actual website, the page jumps or auto scrolls up or down when the items are clicked on.
This does not seem like natural behavior as it will scroll the information in the tabs and accordion out of sight.

Needless to say, I would like the title area of the accordion to remain still and just the contents within the accordion to drop down. No movement (other than the drop down and change of tab item) when the user clicks on a tab nav or accordion.

Any ideas?

Please add the following code under Customize -> Custom -> Java Script :

jQuery(document).ready(function($) {
   $('.x-accordion-toggle').click(function() {
      var $adminbarHeight = $('#wpadminbar').outerHeight();
      var $navbarHeight   = $('.x-navbar').outerHeight();
      var $this = $(this);

      setTimeout(function() {
         $('html, body').animate({ 
            scrollTop: $this.offset().top - $adminbarHeight - $navbarHeight + 1
         }, 400)
      }, 300)
   });
});

To fix tabs add this as well :

jQuery(function($){

$('.x-nav-tabs-item a').on('click', function(){

$('html,body').stop().animate({
      scrollTop: $( $(this).attr('href') ).offset().top - $('.x-navbar').height()
    },700 ,'swing');

});

});

Hope it helps.

https://drive.google.com/file/d/0B_RjEO4O9yNMZXhUaXF6QVU4YzQ/view?usp=sharing – I’ll try to keep this up here for a while.

http://alvein.com/expect/

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

http://development.bynaturepetfoods.com/by-nature-dog-food/grain-free-dry-dog/ocean-whitefish-green-peas/

I tried this code and it makes the the scrolling stop.

jQuery(document).ready(function($) {
   $('.x-accordion-toggle, .x-nav-tabs-item a').click(function(e) {
      $('html, body').stop();
   });
});

Or do you wish the scrolling still enabled?

@Microarts, could you try this code too?

Thanks guys!