Question

I have some HTML that looks like this:

<ul class='faq'>     <li class='open'>         <a class='question' href=''>This is my question?</a>         <p>Of course you can, it will be awesome. </p>     </li> </ul> 

Using CSS I’m setting the p tag to display:none;. I want to use jQuery to display or hide the p tag when the anchor is clicked, but I’m having some troubles with the sibling selector.

Just trying to get the selector working, I tried:

$('a.question').click(function () {     $(this + ' ~ p').css('background-color', 'red'); }); 

to test it out. Seemingly, the sibling selector can’t really be used like that, and as I’m completely new to jQuery I don’t know the appropriate means to make that happen.

Answer 1

Try using:

$(this).siblings('p').css()