Question

I’m trying to create a rather unique effect. It’s actually not that complicated, what I’m trying to do is build an experimental site, which I have already done. I just can’t seem to figure out how to go about doing the final step.

So this is my site I’m tinkering with http://www.dig.ital.me/sandbox/about-me/

And what I’m trying to do is collapse the left-side bar that has the text in it : “Made in blah blah blah, etc.” By clicking on the : ” Click this to hide this ” .

And I’ve tried going about doing an anchor link associated with a name link and calling the display:none when that link is clicked. However, it isn’t working. So I thought I would try stackoverflow, on how I could about achieving this kind of effect where it collapses, and re-opens again.

#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;}
#hide-option:hover .fixedfooter {
display:none;
cursor:pointer; }

Here’s a snippet of the hide-option div id. I’ve exhausted a lot of routes to try and achieve this effect but I cannot seem how to figure it out. I’ve tried the :onClick class, and nth-child classes, but nothing seems to work.

Answer 1

//  Store the footer as a variable, so we don't have to keep calling jQuery's selector engine
//  It's slower than a tortoise stuck in a traffic jam.
var target = $('.fixedfooter');

//  Every time the hide-option link is clicked
$('#hide-option a').click(function() {

    //  If the left position of the target is 0
    if(parseInt(target.css('left')) == 0) {
        //  Check the target is not animated and, if it is, animate off screen
        !target.is(':animated') && target.animate({left: -751}, 250);
    } else {
        //  Assume it's hidden, and put it back to the start
        !target.is(':animated') && target.animate({left: 0}, 250);
    }

    //  Stop the link being followed
    return false;

});