Focusing on open Accordion item

  

I have a vertical accordion on a web page, when I open one of them, I'd like for it to scroll/focus on the top of it.

I'm currently testing some changes to AccordionVertical.js, in: $('.AccordionVertical__header').click(function()

I'm adding: var offsetHeight = header.parent().parent().children(".AccordionVertical_item.open").offsetHeight;, but that is getting 'Undefined', but without the .offsetHeight I get the .open child which has an offsetHeight value.


Why is offsetHeight Undefined? Does anyone have some other suggestions? 

I'm on Outsystems version 9.1.607, unable to upgrade. Does any SilkUI Framework version have functionality related to focusing on an open item?

Solution

Hi James

You can use this piece of javascript in a XY Expression (with Escape Content property set to No):

"<script>
$( document ).ready(function() {
  SetEventMoveOpenItemToTop();
});

function SetEventMoveOpenItemToTop(){
  $( ""div.AccordionVertical__header"" ).click(function() {
    $('html').animate({scrollTop: $('.AccordionVertical_item.open').offset().top-50}, 'fast');
});
}
$(window).bind('mousewheel', function() {
    $('html, body').stop();
});
</script>
"

Basically it will:

  • Set a click event on the header of the Accordion Item
  • On click, it will scroll the page until the element (you will have to adjust the size of your header: 50 in my case)
  • Stop the animation when you scroll with the mouse otherwise it will get stuck

Was this what you were looking for?

Cheers,

José

EDIT: Edited the above code since it was adding multiple events in each click. Now it should be good.

Solution