Question

I am working on a webpage which uses accordion div elements to expand and contract the content of each title. I am also using a custom scrollbar that needs to get updated whenever either an expand or a contract event happens.
So far the solution i came up with is to use jquery’s live like below:

jQuery(‘#accordion_sp1_id139’).live(‘click’,function(){ myScrollBar.update();});

So basically i am telling it to update the scrollbar anytime a click event occurs within the main accordion div.

My problem is that this doesn’t work the first time anything is clicked inside that div, but it works on any subsequent clicks. Is there anyway to make it work on the first click also.

Here is the page with the problem: https://www.arrowandbranch.com/media/press
the scrollbar i use is jquery plugin taken from http://www.baijs.nl/tinyscrollbar/

Answer 1

I believe what’s going on here is your click event for your Accordion container is firing directly after the click event to start the accordion animation but before the container is expanded. You’ll need to set your myScrollBar.update() call to happen after the Accordion animation has completed which is mentioned in the documentation for the MooTools Docs – Fx/Fx.Accordion (although it doesn’t quite stand out at first)

in your Accordion script add an onComplete: setting to run your scrollbar update…

var myAccordion139 = new Accordion(document.getElements('#accordion_sp1_id139 .toggler'), document.getElements('#accordion_sp1_id139 .sp-accordion-inner'), {
    opacity: true,
            display:-1,
            alwaysHide: true,       
    onActive: function(toggler){
        toggler.addClass('active');
    },
    onBackground: function(toggler){
        toggler.removeClass('active');
    },
    onComplete: function(toggler) {
        myScrollBar.update();
    }
});