Jquery sliding out/in box

Question

I have a problem showing and hidden a text box.

You can see it working at: http://jsfiddle.net/CVPSg/

Problem:

I want to click <li><a href="# " title=" ">About</a></li> and show the <aside id="aboutBox"> coming from the left part of the screen (display: none)

Then, I want to close <aside id="aboutBox"> with <h2><a href="#" title=" ">Close X</a></h2>

Also, The <aside id="aboutBox"> does not hidden and/or does not move to the left once again to display none.

It keeps moving to the right of the screen.

I hope it makes sense.

And I have added the code here as well:

HTML

<ul class="extras">
          <li><a href="# " title=" ">About</a></li>
            <!-- <li>Blog</li> For the future -->
            <li class="hidesearch showsearch">
                <form action="http://www.racamstudio.com/searchSubmit" method="post" name="seachform">
                    <input type="text" id="searchInputRight" value="Search..." in-focus="false" name="searchText">
                    <input width="16" height="16" type="image" id="searchbuttonRight" alt="Submit" name="submit" src="http://www.racamstudio.com/resources/images/search_icon_over.gif">
                </form>
            </li>
        </ul><!-- end extras-->


        <aside id="aboutBox">
            <h1>Welcome</h1>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
              <h2><a href="#" title=" ">Close X</a></h2>
         </aside><!-- end aboutbox -->  

Javascript

$(function() {
    // slideshow
    var currentPosition = 0;
    var slideWidth = 340;
    var slides = $('#aboutBox');
    var numberOfSlides = 2; // slides.length: show all images 
    // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
    $('#aboutBox').css('overflow', 'hidden');
    // Wrap all .slides with #slideInner div 
    // variable slides = #aboutBox
    slides.wrapAll('<div id="wrapAbout"></div>').css({
        'display': 'none'
    });

    $('#wrapAbout').css('width', '340px');

    // Create event listeners for .controls clicks
    $('.extras li a').bind('click', function() {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'left') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#aboutBox').animate({
            'marginLeft': slideWidth * (-currentPosition),
            'display': 'block'
        });
    });
    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) {
            $('#aboutBox').hide()
        } else {
            $('#aboutBox').show()
        }
    }
});

Answer 1

You don't want overflow:hidden on the slide-out, you want that on the wrapper. You don't want to animate the margin-left or display, you want to animate the wrapper's width. There's no need to absolutely position your slide-out either. Also, you can simplify things by handling the show and hide actions in separate handlers:

var slideWidth = 340;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
    width: slideWidth,
    height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
    width: 1,
    height: slides.height(),
    overflow: 'hidden',
    display: 'none'
});
$('#show').click(function() {
    if(wrapper.is(':visible'))
        return;
    wrapper.show().animate({
        width: '+=' + slideWidth
    }, 'slow');
});
$('#hide').click(function() {
    wrapper.animate({
        width: 1
    }, 'slow', function() {
        wrapper.hide();
    });
});

I tweaked the HTML and CSS a bit too: I added id attributes to the show and hide links and dropped all the positioning for #aboutBox: http://jsfiddle.net/ambiguous/mp7aR/