Bootstrap navbar toggle use to add class

I use Bootstrap V3 in Wordpress.

What I want to achieve is that when someone clicks the button in the collapsed navbar menu, the div with the class .slider gets a extra class.

This is the HTML from the navbar:

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <?php
        wp_nav_menu( array(
            'theme_location'    => 'navbar-right',
            'depth'             => 2,
            'menu_class'        => 'nav navbar-nav navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

And this is the HTML from the div where I want to add a extra class:

<div class="slider">
  <div class="container">
    <div class="row">
      other elements 
    </div> <!-- close row -->
  </div> <!-- close container -->
</div> <!-- close slider -->

I've tried this with CSS:

.navbar-default .navbar-collapse .in ~ .slider{
   margin-top: -246px;
   padding-top: 176px;
}

And this with jQuery:

$(function() {                       
  $("#navbar").click(function() {  
    $(".slider").addClass("sliderMove");      
  });
});

The extra class that should be added on slider is:

.sliderMove{
  margin-top: -246px;
  padding-top: 176px;
}

The purpose of this is that the slider that is after/under the navbar stay's under the navbar when it collapsed.