Question

So here is a project I’m working on for a friend – http://projects.beauaugust.co.uk/cheatulous/

What I need to happen is when one of the links in .menu are clicked, the divs inside .items fade in. I already have it so that the .sort div resizes to hold the content, I just need those divs to fade in afterward so it looks like the content is inside it, if that makes sense. If you click on one of the links inside the menu bar in the demo you’ll see.

Cheers as ever, If I haven’t given enough information I’m sorry!

Answer 1

$(function() {
    $(".item").hide();
    $(".menu a").click(function(event) {
        event.preventDefault(); //stops page from reloading on link click
        $(".item").fadeIn("slow");
    });
});

Something like that?

Alternative:

If you want the divs to fade in after the page has loaded (i.e. you want to actually switch to another html page and THEN have the divs fade in) the above won’t work. Instead you could simply add:

$(function() {
    $(".item").hide().fadeIn("slow");
});

Which will make the .item divs flash (hide and then fade in, which is what you want afaik) on page reloads.

Alternative 2:

If you want the five divs currently displaying to be hidden when you first enter the page, and then be displayed as you click ANY link (i.e. they will be popped into view as the yellow background slides down), you could use display:none on .item in the CSS, and then use fade in on the links as above.