Question

I am trying to make a child div slide into view within a parent div upon a user clicking on a text link which is located outside of either divs.

It’s basically used for an advanced search criteria section for a search page, so when the user enters the page, by default I’m trying to either position it off a bit(to hide it) initially until the user clicks on the text link which makes it toggle and slides into view. (advanced search criteria is like linkedin to a horizontal slide was necessary)

here is what I got which does not seem to hide it when user enters and also does not allow me to position a text link externally on the same page.

The CSS

 <style type="text/css">
.slide {
position: relative;
overflow: hidden
}

.slide .inner {
bottom: 0;
width: 220px;
}

</style>

The dreaded link text in the parent div I cant seem to relocate anywhere:

<div id="slidebottom" class="slide">
<a href="#" class="toggle">Slide it</a>
<div class="inner">

The Jquery:

<script>
$(document).ready(function() {
    $('.toggle').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ?
                $marginLefty.outerWidth() : 0
        });
    });
});
</script>

Answer 1

I made a simple example for you:

http://jsfiddle.net/WJ7Zp/

$('.toggle').click(function() {
  $(this).next().animate({width: 'toggle'});
});