jScrollPane problem with showing from a hidden div

I'm using the http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/ as a wa开发者_Python百科y to form my own custom scrollbar, I allmost got it working but ofcourse there's a small problem that hinders me from finishing the project.

When I place the container div and scroll-pane div (that holds the content) somewhere in the site it works fine, but I need to have the scrollbar in a div that starts out hidden. But when the user clicks to show the div it does show the div but the scroll-pane div stays hidden. Now I read I need to use reinitialise but I can't figure out where to place it.

I use this jquerycode to hide the div

// Begin Toggle Hide functie off the extended update view
    jQuery('.social_media_updates_extended_view').hide();

and this part enables me to toggle between different div's.

        jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow').not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
        });

            var $container = $(".wrapper_update");
                $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
                    var $view = $(this).closest(".wrapper_update").find(".social_media_updates_extended_view").fadeToggle(200);

                    $container.find(".social_media_updates_extended_view").not($view).fadeOut(200);
            })
// End Toggle Hide functie off the extended update view.

and this is the part I use to call the scrollbars

// Begin Custom Scroll in Div
    jQuery(function(){
        jQuery('.scroll-pane').jScrollPane(
            {reinitialise: true}
        );
    });

Try this

jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow')
            .not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
});

var $container = $(".wrapper_update");
$container.delegate(".update_extend .btnFadeIn", "click", function(event){
   var $view = $(this).closest(".wrapper_update")
               .find(".social_media_updates_extended_view")
               .fadeToggle(200, function(){

                     //Here we should check if the container is visible
                     //then reinitialise it
                     if($(this).is(':visible')){
                         jQuery('.scroll-pane').jScrollPane(
                                {reinitialise: true}
                         );
                      }


                });

    $container.find(".social_media_updates_extended_view")
    .not($view).fadeOut(200);
});

Add autoReinitialise: true

$(function(){
    $('.scroll-pane').jScrollPane({autoReinitialise: true});
});