Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jquery to hide elements, load new background

jquery to hide elements, load new background

Problem

The idea for the site is going to be a main page with 6 separate div classes, once one is clicked I would like it to rise to the top of the page and for the other elements to disappear. I'm using two images for the regular look and the hover. For the first link, I would like it to load the new background so it only has the one element. How can I go about doing this? I'm not very proficient in jquery:

    
    
     Div Blocks

i tried with css as you can see fro the code and it didnt work out

Problem courtesy of: matture

Solution

You may be looking for this:

$("a").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(this)
        .closest("div") // select the parent div of the link
        .animate("top","0") // animation to take it to the top of the page
        .siblings() // select all the siblings of the div
        .hide(); // hide them
});
Solution courtesy of: Purag

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jquery to hide elements, load new background

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×