Forums

steven_gardner

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

davesgonebananas

<ul>
<li class=\"profile\">
   <a href=\"#\">Player Name</a>
   <p style=\"display: none\">Player bio...</p></li>
</ul>

$(\"li.profile a\").click(function(e) {
   $(e.target).closest(\"p\").toggle();
   return false;
}

steven_gardner

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.

apostrophe

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

$(function() {
      $(\"li.profile a\").click(function(e) {
       $(e.target).closest(\"li\").find(\"p\").toggle();
        return false;
    	 })
 });

steven_gardner

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

apostrophe

http://css-tricks.com/forums/viewtopic.php?f=5&t=3482

davesgonebananas

That should have been

$(e.target).next(\"p\").toggle();

Appologies.

apostrophe

"davesgonebananas" said:
That should have been
$(e.target).next(\"p\").toggle();
Appologies.

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

treehouse : what would you like to learn today?

Forums

Jquery Toggle list items small problem