Custom jQuery scrollbar

Question

I'm using a custom scrollbar plugin called Tiny Scrollbar. Inside the scrollbar I have an accordion type navigation.

My problem is the scrollbar doesn't update when the navigation height is changed, anyone got any ideas? I'm thinking maybe some form of ajax update on every click, however I have no experience in ajax so I don't know. This is the code for the navigation.

<div id="nav-container">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
<div class="viewport">
  <div class="overview">
    <nav class="main">

    <div class="menu-item">
      <h4><a href="#">Inledning</a></h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
    </div>

    </nav>
  </div>
</div>
</div>

jQuery:

$(document).ready(function() {
var $ul = $('ul');

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
$(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
});

$( "li" ).click(function() {
  $( "li" ).removeClass( "select" );
    $(this).addClass( "select" );
  });
});

Answer 1

On the Tiny Scrollbar website it says that when new content is added you need to update the holding container. e.g.

//The update method can be used for adjusting a scrollbar to its new content.
var yourScrollBar = $('nav-container');
yourScrollBar.tinyscrollbar();

//The below function would be called when updating the content. 
yourScrollBar.tinyscrollbar_update();

The above code is an example from the plugin website.

For example with your code.

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
  $(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
  yourScrollBar.tinyscrollbar_update(); <-------- Here. 
});