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:

/

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/gVjFs/70/

• javascript
• jquery
• css

Share Improve this question Follow edited Feb 7, 2013 at 14:02 dash 91.6k44 gold badges5454 silver badges7272 bronze badges asked Feb 7, 2013 at 13:49 emcee22emcee22 1,88966 gold badges2323 silver badges3232 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

There are two ways you can do this, one that also requires jQuery UI, the other with only jQuery.

Without jQuery UI:

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').animate({width:'toggle'},800);;
         return false;
     });
});

jsFiddle example. This example uses .animate() to change the width.

---

With jQuery UI

$(document).ready(function () {
     $('#second').hide();
     $('span.slide1').click(function () {
         $('#second').show("slide", { direction: "left" }, 800);
         return false;
     });
});

jsFiddle example. This example uses jQuery UI's effects methods.

I think you just need some CSS style to do this.

.slide1 {
    display:inline-block;
}
.content1{
    display:inline-block;
}

Here is the updated JS Fiddle

Cheers.

EDIT: Just read again the answer and it looks you want it to appear on the left, sorry about the previous, but with css you can do it fine as well

.slide1 {
    display:inline-block;
}
.content1{
    float:left;
}

New JS Fiddle

Try the following. You will need effects from jquery-ui, but as i can see in your jsfiddle, you are using it.

$(document).ready(function () {
    $('#second').hide();
    $('span.slide1').click(function () {
        $('#second').effect('slide', 500);
        return false;
    });
});

see http://jsfiddle/gVjFs/73/

Try like this

.slide1 {
display:inline-block;
}
.content1{
display:inline-block;
float: left;
}

See Demo

You can create a custom animation, like this one:

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.outerWidth();
  return this.show().animate({marginLeft: parseFloat(this.css('marginLeft')) < 0 ? 0 : -h}, speed, easing, callback);  
};

You can achieve the effect like this: http://jsfiddle/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);
       });
   });