Grow your CSS skills. Land your dream job.

JQuery Animate and Toggle

  • # August 10, 2008 at 3:26 pm

    Hi everyone,

    I’m new to the forum and Jquery. I just actually found out about JQuery from one of Chris’s videos and found it quite
    interesting. I’m in no way an expert web designer btw, just starting to get my feet wet. I was just wondering if someone
    could help me try and get something to work.

    I have a page with some links at the top in a list and than a division in the middle of the page bellow them. I would like to click on a link, and cause the division to animate to a specific dimension and populate it with text, images. etc. I would like the links to be external .htmls due to the page being somewhat too big.

    This is what I started to try it out with but it don’t work:

    Code:
    $(document).ready(function() {
    $(“li.linkone”).click(function(){
    $(“#content”).animate({
    width: “300px”
    });
    });
    $(“li.linkone”).click(function(){
    $(“#topic1″).toggle();
    });
    });

    This is with a hidden div of text thats on the same page.

    Any help would be appreaceated. I tried looking for a demo but I can’t seem to find what I’m looking for.
    This is the closest I found:

    http://nettuts.com/javascript-ajax/how- … th-jquery/

    Thanks again,
    -Russell

    # August 10, 2010 at 2:42 pm

    I think what’s happening is that you’re putting to different clicking functions onto one li when you should just put them together

    Code:
    $(document).ready(function() {
    $("li.linkone").click(function(){
    $("#content").animate({
    width: "300px"
    });
    $("#topic1").toggle();
    });
    });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".