JQuery - Horizontally slide in div from right onClick event : <p>I have a webpage that has a list-group of Products.  </p>

<p>What I am trying to do is...when a viewer clicks on a product chevron, the Product List slides off to the left and the details of the products slides in from the right.  Then when user clicks on details chevron, the details slide off to the right and the Product List slides in from the left.</p>

<p>For example, if I had a webpage with this showing...</p>

<pre><code>Product1 &gt;
Product2 &gt;
Product3 &gt;
</code></pre>

<p>When user clicks on Product2 >, the details will slide in from the right and the list will slide out to the left. And the webpage looks like this.</p>

<pre><code>&lt; Product2
  p2 detail1
  p2 detail2
  p2 detail3
</code></pre>

<p>When the user clicks on &lt; Product2, the details will slide off to right and product list slide in from left.</p>

<p>This is probably so simple, using .animate or the like, and is surely being done on mobile sites, but I just cannot find a good example. I've seen samples showing sliding divs horizontally, but nothing that slides off/on the page.</p>

<p>Any and all help is appreciated. Thank you.</p>
