title: Slide div to the right and left on click
body: <p>I have a navigation bar that on mobile it has overflow and for people to see all the choices they need to scroll to the right or to the left. I want to add buttons with arrows so when people click for example on the right one the nabber will slide on its own to the right.</p>
  
  <p>I have tried jQuery </p>
  
  <pre><code>$('#admin-menu').animate({width:'toggle'},350);
  or
  $(#admin-menu).show("slide", { direction: "left" }, 1000);
  or
  $('#admin-menu').slideToggle( "slow" );
  </code></pre>
  
  <p>but none of this seems to work how I want, it makes the nabber dissappear.</p>
  
  <p>the menu bar with slider</p>
  
  <pre><code>&lt;nav id="admin-menu"&gt;
      &lt;span class="tab active" id="locations-tab"&gt;
        &lt;h6&gt;Dashboard&lt;/h6&gt;
      &lt;/span&gt;
      &lt;span class="tab" id="users-tab"&gt;
         &lt;h6&gt;Users&lt;/h6&gt;
      &lt;/span&gt;
      &lt;span class="tab" id="users-tab"&gt;
         &lt;h6&gt;Users&lt;/h6&gt;
      &lt;/span&gt;
      &lt;span class="tab" id="users-tab"&gt;
         &lt;h6&gt;Users&lt;/h6&gt;
      &lt;/span&gt;
      &lt;span class="tab" id="users-tab"&gt;
         &lt;h6&gt;Users&lt;/h6&gt;
      &lt;/span&gt;
      &lt;span class="tab" id="users-tab"&gt;
         &lt;h6&gt;Users&lt;/h6&gt;
      &lt;/span&gt;
  &lt;/nav&gt;
  
  //The button to slide
      &lt;i class="fas fa-chevron-circle-right right-slider" onClick="slider()"&gt;&lt;/I&gt;
  </code></pre>
  
  <p>The function </p>
  
  <pre><code>function slider(){
      console.log('Im here!!')
  
      $('#admin-menu').animate({width:'toggle'},50);
  }
  </code></pre>
  
  <p>I want to be able to click the button and have the navigation-bar scroll to the left.</p>