How do I show/hide a div with a slide effect? Jquery

Question

I'm completely new to jQuery and I'm trying to create my own navigation bar which slides in from the right on click.

I found a snippet online which shows and hides my div with slideToggle but rather than it just appear I'd like it to smoothly slide in from the right. Please let me know where I'm going wrong.

Here is the jQuery:

$(document).ready(function(){

  $(".menu").hide();
  $("#drop-icon").show();

  $('#drop-icon').click(function(){
  $(".menu").slideToggle(1000);

jQuery doesn't really have anything built in, other than `animate`, but jQuery UI does have a built in slide-right -> https://api.jqueryui.com/slide-effect/ — adeneo, Oct 19 '16 at 17:00
Possible duplicate of [JQuery: Slide left and slide right](http://stackoverflow.com/questions/2411314/jquery-slide-left-and-slide-right) — freedomn-m, Oct 19 '16 at 17:09

score 0 · Answer 1 · answered Oct 19 '16 at 18:03

Hello try the below code hope you are looking for this . . . i did it with less code but effective .Hope it helps.

$('#button1').on('click', function() {
 $('.inner').toggleClass('visible');
 $('.inner').animate({
  width: 'toggle',
 
 },500);
});

.toolbar {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin: 0px auto;
    padding: 5px 0px;
 position: absolute;  
}

#menu  ul li{
    display: inline;
 padding:5px;
 margin:5px;
 width:100px;
 
}

.inner {
    float: right;
     display: none;
 padding-right: 5px;
 background-color:pink;

}

#button1 {    
    margin-right: 5px;
 justify:center:
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div style="text-align:center;">
 <button type="button" id="button1" class="btn btn-success">Menu</button>
    </div>
 <div class='toolbar'>
    <div class="inner is-hidden">
        <div id="menu">  
    <ul >
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
    </div> 
    </div>
</div>

How do I show/hide a div with a slide effect? Jquery

1 Answers1