title: How to slide a DIV on link click
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id="trt" style="position: relative; height: 40px;"&gt;
      &lt;a href="#" style="text-align: center" class="a_demo_three third_button"&gt;
          M E N U
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="tst" style="position: relative; height: 200px; width: 200px; background-color: #FF0000; display: none;"&gt;
      THIS IS THE INNER MENU
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.a_demo_three {
      background-color:#3bb3e0;
      font-family: 'Open Sans', sans-serif;
      font-size:12px;
      text-decoration:none;
      color:#fff;
      position:relative;
      padding:10px 20px;
      border-left:solid 1px #2ab7ec;
      margin-left:35px;
      background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(44,160,202)),
      color-stop(1, rgb(62,184,229))
      );
      -webkit-border-top-right-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      -moz-border-radius-bottomright: 5px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
      -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
      -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  }
  
  .a_demo_three:active {
      top:3px;
      background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(62,184,229)),
      color-stop(1, rgb(44,160,202))
      );
      -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
      -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
      -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
      box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
  }
  
  .a_demo_three::before {
      background-color:#2561b4;
      content:"1";
      width:35px;
      max-height:29px;
      height:100%;
      position:absolute;
      display:block;
      padding-top:8px;
      top:0px;
      left:-36px;
      font-size:16px;
      font-weight:bold;
      color:#8fd1ea;
      text-shadow:1px 1px 0px #07526e;
      border-right:solid 1px #07526e;
      background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
      background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(10,94,125)),
      color-stop(1, rgb(14,139,184))
      );
      -webkit-border-top-left-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-bottomleft: 5px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
      -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
      -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
      box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
  }
  
  .a_demo_three:active::before {
      top:-3px;
      -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
      -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
      -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
      box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
  }
  
  /*
  Third button
  */
  
  .third_button::before {
      content: url('menu.png');
  }
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $('#trt a').click(function(e){ //where menu is the id of your menu item
          e.preventDefault();
          $('#tst').slideToggle(); // where content is the id of your content div
      });
  
  
      //ORIGINALLY THE MENU should be hidden out of the user's view.
      //ON CLICKING ON MENU the `tst` div will slide down, the menu button should be in `active` status.
      //ON CLICKING ON MENU again the `tst` div will slide up and out of view and the menu button should be in `normal` status
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>What I am looking to do is have the <code>tst</code> div out of view when the page loads. When the user clicks on the <code>a</code> link which is a button, the <code>tst</code> div should slide to the right and be placed on right of the link.</p>
  
  <p>Starts with this:</p>
  
  <p><img src="https://i.stack.imgur.com/AZu7V.png" alt="enter image description here"></p>
  
  <p>When the user clicks on the menu the <code>tst</code> div should animate and slide to the right and should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Hv3Ox.png" alt="enter image description here"></p>
  
  <p>Finally, when the user clicks on the menu link again, the <code>tst</code> div slide to the left and out of the user's view.</p>
  
  <p>How do I achieve that?</p>