What is the right way to use the tinyscrollbar update function with a jquery onclick event?

Question

I have a list of states that displays or hides on click of a button using jquery slideUp() and sideDown() functions.

I'm trying to use jquery tinyscrollbar to add a custom scrollbar to it.

I have a jsfiddle here: http://jsfiddle.net/ByteMyPixel/acLch/

I almost have it working, but am stuck - the tinyscrollbar shows on the second click event/slideUp() instead of slideDown().

Any ideas on how to fix this so that the tinyscrollbar appears on slideDown(), and disappears on slideUp()?

Here is my code:

var oScrollbar1 = $('#scrollbar1');
oScrollbar1.tinyscrollbar();

$("a.button").click(function () {

oScrollbar1.tinyscrollbar_update();

    if ($("ul.scrolling").is(":hidden")) {
        $("ul.scrolling").slideDown("slow");
    } else {
        $("ul.scrolling").slideUp("slow");
    }
});

Answer 1

    var oScrollbar1 = $('#scrollbar1');
    oScrollbar1.tinyscrollbar();

    $("a.button").click(function() 
    {
        $("ul.scrolling").slideToggle("slow", function()
        {                               
            oScrollbar1.tinyscrollbar_update();
        });
    });

This will fix your problem :)

Answer 2

Using the tinyscrollbar for jQuery like this:

var scroll = $("#add-widget-scroll").tinyscrollbar();

I did some research and I found that the "update" function can be accessed using this:

$(scroll).data().plugin_tinyscrollbar.update();