Grow your CSS skills. Land your dream job.

Jquery Toggle list items small problem

  • # July 15, 2009 at 9:17 am

    Hi Guys,

    I am trying to work with jquery and want to add a cool feature to my football teams squad page.

    At the moment I have a list of players names linking to individual pages.

    I want the sames list but upon clicking the players linked name I want a short bio to appear below the players link.

    I have something worked out but its showing all links on the same click.
    $("li.profile").click(function(){
    $("p").toggle({
    });
    });

    The "p" tag is a display of none.

    I thought about uniquely naming the list items and repeating the javascript a number of times but that cant be the best way.

    any ideas please..

    Thanks

    Steven Gardner

    # July 15, 2009 at 11:03 am
    Code:
    Code:
    $(“li.profile a”).click(function(e) {
    $(e.target).closest(“p”).toggle();
    return false;
    }
    # July 15, 2009 at 11:42 am

    Are you sure that code is correct as i cant get anything to work.

    I have tried it on a single test page with a link to Jquery but i get no results.

    # July 15, 2009 at 12:32 pm

    I’m sure there is a more elegant solution but this works:

    Code:
    $(function() {
    $(“li.profile a”).click(function(e) {
    $(e.target).closest(“li”).find(“p”).toggle();
    return false;
    })
    });
    # July 15, 2009 at 4:10 pm

    Ok,

    Thanks for the Update!!!

    it has worked fine on a test page. My problem comes when i try to implement it on a wordpress page.

    I have linked to Jquery in the header—I have added the short script directly into the head tag on the header section.

    I have copied my text html list into the wordpress page.

    Still i have not activity when i click the links.

    Any further help would be much appreciated.

    Steven

    # July 15, 2009 at 6:04 pm

    That should have been

    Code:
    $(e.target).next(“p”).toggle();

    Appologies.

    # July 16, 2009 at 3:05 am
    "davesgonebananas" wrote:
    That should have been

    Code:
    $(e.target).next(“p”).toggle();

    Appologies.

    I told you there was a more elegant solution. :D

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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