JscrollPane Div doesn't work when children Div are called

Question

Using JscrollPane on a "master" div, and have the content in children divs within that div. I'm using jquery show/hide to load the content onClick, but the child div won't appear. If I remove JscrollPane it works fine :(

HTML:

<h3 onclick="internalNav('testTwo')">Click to see Div Two</h3>
       <div id="content" class="scroll-pane">
            <div id="testOne">
                <h1>Title 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div id="testTwo">
                <h1>Title 1/h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

JS

$(document).ready(function(){

    //Hide all divs, then show first div
    $("#content > div").hide()
    $("#content > div:first").show()

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

});


function internalNav(divId) {

    $("#content > div").not('#' + divId).hide()
    $('#' + divId).fadeIn()


}

I can't see what's wrong here!

Answer 1

You need to reinitialise jScrollPane after changing the content inside it (or changing the visibility of that content). Here is an example:

http://jscrollpane.kelvinluck.com/invisibles.html

Also, I notice that you have a $(function() block inside a document.ready block. You don't need that additional block - you can just apply jScrollPane directly since you are already inside a document.ready block

As a side note, using the onclick attribute in your h3 isn't considered best practice. Instead you could add an event listener with jQuery. This is an example showing both the reinitialisation and using the cleaner event binding:

$('.internal-nav').bind(
    'click',
    function(e)
    {
        var divId = $(this).attr('rel');
        // Notice no spaces around the ">" - this will help if you have nested divs
        $("#content>div").not('#' + divId).hide(); 
        $('#' + divId).fadeIn(
            function()
            {
                $('.scroll-pane').jScrollPane()
            }
        );

    }
);

With the h3 from your HTML replaced with:

<h3 class="internal-nav" rel="testTwo">Click to see Div Two</h3>