jScrollPane: Basic example

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/demo.css">
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
        <div id="container">
            <h2 id='zyx'>Click ME!</h2>
            <div class="scroll-pane">
                <p>fiddle</p><p>fiddle</p><p>fiddle</p><p>fiddle</p><p>fiddle</p>
                <div id='xyz' style='display:none;'>
                    <p>
                        TEST
                    </p>
                    <p>
                        TEST
                    </p>
                    <p>
                        TEST
                    </p>
                    <p>
                        TEST
                    </p>
                </div>
 
               
            </div>
        </div>

CSS

#container
{
    width: 510px;
}
/* Styles specific to this particular page */
.scroll-pane
{
    width: 100%;
    height: auto;
    overflow: auto;
}
.scroll-pane p
{
    margin: 0;
}
h2 {
    cursor: pointer;
}
.jspVerticalBar
{
	left: 0;
}

JavaScript

$(function()
{
    $('.scroll-pane').each(
        function () {
            $(this).jScrollPane({
                showArrows: $(this).is('.arrow'),
                autoReinitialise: true,               
            });
        }
    );  
    $('#zyx').click(function(){
        $('#xyz').toggle(400);
    });
    

});