Using "this" with jQuery Selectors

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()

Answer 2

$(this).next("p").css("...")

the "p" above is optional, if you just want the next non-whitespace node in the DOM.

Answer 3

I want to use jQuery to display or hide the 'p' tag when the anchor is clicked

Since you mentioned that you'd like to toggle the 'p' tag when the anchor is clicked, I'd do:

  $("a.question").click(function (event) {
      $(this).siblings('p').show(); //toggle the p tags that are siblings to the clicked element
      event.preventDefault(); //stop the browser from following the link
  });