<p>I have some HTML that looks like this:</p>

<pre><code>&lt;ul class="faq"&gt;
    &lt;li class="open"&gt;
        &lt;a class="question" href=""&gt;This is my question?&lt;/a&gt;
        &lt;p&gt;Of course you can, it will be awesome. &lt;/p&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

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

<p>Just trying to get the selector working, I tried:</p>

<pre><code>$("a.question").click(function () {
    $(this + " ~ p").css("background-color", "red");
});
</code></pre>

<p>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. </p>

```
```
$(this).next("p").css("...")
```
```
the "p" above is optional, if you just want the next non-whitespace node in the DOM.