Accordion Scroll to

129
April 22, 2019, at 9:50 PM

I am trying to add an scrollTo command to the following accordion code.

The problem is the slideup() command changes the screen then the position is detected wrong.

$handlers.removeClass('active');
$panels.slideUp();
$(this).addClass('active').parent().find('.accordion-container').slideDown();
var position = $(this).position();
window.scrollTo(position.left, position.top - 110);

The above code works correct if the all accordion containers are closed. If one of the containers are open and it is closed with the slideup() command then the position command fails and then the screen is moved to completely wrong position.

Full function

!(function($){
$.fn.Accordion = function(options){
    var settings = $.extend({
        hidefirst: 0
    }, options);
    return this.each(function(){
        var $items      = $(this).find('>div');
        var $handlers   = $items.find('.toggler');
        var $panels     = $items.find('.accordion-container');
        if( settings.hidefirst === 1 )
        {
            $panels.hide().first();
        }
        else
        {
            $handlers.first().addClass('active');
            $panels.hide().first().slideDown();
        }
        $handlers.on('click', function(){
            if( $(this).hasClass('active') )
            {
                $(this).removeClass('active');
                $panels.slideUp();
            }
            else
            {
                $handlers.removeClass('active');
                $panels.slideUp();
                $(this).addClass('active').parent().find('.accordion-container').slideDown();
                var position = $(this).position();
                window.scrollTo(position.left, position.top - 110);
            }
            event.preventDefault();
        });
    });
};
})(jQuery);
Answer 1

If you cannot use callbacks for some reason, you could also add a timeout of lets say 100ms and scroll after it has completed. That way the dom will probably be already built when the scrolling kicks in.

But I would recommend using the callback of slideDown. It takes a function 'complete' as seen here: http://api.jquery.com/slidedown/

So change your code to something like this:

$(this).addClass('active');
var accCont = $(this).parent().find('.accordion-container');
accCont.slideDown(200, function() {
    var position = accCont.position();
    window.scrollTo(position.left, position.top - 110);
});

It may not be 100% correct for your use-case, but I guess you get the point.

READ ALSO
SQLiteOpenHelper - Cannot access disposed object

SQLiteOpenHelper - Cannot access disposed object

I have a my SQLiteOpenHelper class, which is written as a singletonI should note that I am not doing this in Java, I am using Xamarin

124
In Javascript IF-ELSE, IF Statement is not working

In Javascript IF-ELSE, IF Statement is not working

I am trying to work on verifying OTPHere I have two components that are:

15
Fit entire web page on the screen without using scroll bar in css

Fit entire web page on the screen without using scroll bar in css

When I remove scroll bar usingbody{ overflow-y;} in the CSS, I'm unable to see the entire page on the screen

100