title: jQuery : Toggle Sliding A div from left to right over another div
body: <p>I am trying to slide a partially hidden div (placed using <code>margin-right: -300px;</code> to the element and <code>overflow-x: hidden;</code> to the parent. Here is the code I have used:</p>
  
  <pre><code>&lt;div class="entry-content"&gt;
      &lt;div class="first"&gt;
          &lt;!-- Content --&gt;
      &lt;/div&gt;
  
      &lt;div class="second"&gt;
          &lt;!-- Content --&gt;
      &lt;div class="third"&gt;
          &lt;img class="ttoggle" src="http://i61.tinypic.com/21jc3o1.png"&gt;
          &lt;!-- Content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And, the CSS  </p>
  
  <pre><code>.entry-content {
      overflow-x: hidden;
      width: 1140px;
  }
  
  .first {
      float: left;
      height: 1000px;
      padding: 10px;
      width : 560px;
  }
  .second {
      float: left;
      heoght: 1000px;
      padding: 0;
      width: 475px;
  }
  .third {
      float: left;
      height: 1000px;
      margin: 0 -300px 0 0;
  }
  </code></pre>
  
  <p>Now, the every tutorial I came across either not working, or just pulling the div from left making it go down below the first two divs because of the insufficient available width.  </p>
  
  <p><strong>My goal is to pull the div on top of the second div without breaking the layout.</strong> So, I am completely lost here with my little knowledge in jQuery.</p>
  
  <p>Here is a screenshot of what I am trying to achieve. I hope this explains what I tried to achieve.</p>
  
  <p><img src="https://i.stack.imgur.com/VAbfm.jpg" alt="Sliding DIV from Right on Top of another"></p>
  
  <p>Can this be done using jQuery? I certainly don't want anyone to do the job for me, but any help, or even something to play with will be much appreciated.</p>