how to slide right to left using div to show content
<p>I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.</p>

<p>How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.</p>

<p>HTML</p>

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
&lt;div class="inner"&gt;
    Sliding div here!! Yay!!
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;Hover over red div please!!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>CSS</p>

<pre><code>.wrapper{
background-color:red;
    width:200px;
    height:200px;
    position:relative;
    overflow:hidden;
    color:white;
}

.inner{
    width:200px;
    height:100px;
    position:absolute;
    background-color:black;
    margin-top:200px;
color:white;
}
</code></pre>

<p>jquery</p>

<pre><code>$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);

});
});
</code></pre>

<p>and here is the fiddle <a href="http://jsfiddle.net/qGVfp/" rel="nofollow">http://jsfiddle.net/qGVfp/</a></p>
