Problem with tall panels - disappears from view

[dariodev]

When using attribute data-accordion-multiselectable="none" to open one panel at a time, and having tall panels, it happens that panels are opened in a way that content is completely off-screen. For instance: first panel is opened by default (data-accordion-opened="true") -> click on the second button closes the first panel and opens the second, but it goes up and the content of second panel disappears from view, so I have to scroll back to top of the panel. Can you suggest a solution? How we could bind a scroll event so that opened panel is scrolled at the beginning?

[nico3333fr]

Hi @dariodev

thank for pointing it out.

It seems to be more complicated than I though ^^

I've tried a dirty way to do it like $("html, body").animate({ scrollTop: $(e.target).top }, 150);

however, it is not working ($(e.target).top is undefined).

I'm going to think to a solution. See you !

[dariodev]

Here is my dirty try:

    var clicked;
    $(document).mousedown(function(e) {
        // The latest element clicked
        clicked= $(e.target);
    });
	
    $("button").click(function() {
	setTimeout(function() {
	    $('html, body').animate({
	        scrollTop: $(clicked).offset().top - 50
	    }, 800);
	}, 1000); 
    });

I'm using animated accordion (your css). The timeout function is here because we must wait css transition to finish. This works, but opening and scrolling is not smooth enough, looks confusing. I will try to play with this, although I'm not sure if this is a right direction.

[ryuran]

You could wait a transition end event. https://developer.mozilla.org/fr/docs/Web/Events/transitionend