Question

Hello i have the following HTML:

<span class="slide1"><a href="#" class="slide1">Behavior</a></span>
<div id="second" class="content1">I’m not a good</div>

And the following jquery:

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').slideToggle(800);
        return false;
    });
});

How can I make the hidden div toggle and show from the left side?

I mean when I click the element I want the div to appear to the left of the span element.

Here is what I have so far:

http://jsfiddle.net/gVjFs/70/

Answer 1

You can achieve the effect like this: http://jsfiddle.net/gVjFs/70/

<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">I’m not a good</span>

<a href="#" class="slide1" style="float: left;">Behavior</a>

   $(document).ready(function () {
       $('.slide1').click(function () {
           $('#second').animate({
               width: '100px',
           }, 1000);
       });
   });