Question

html:

<style>
   hidden { display:none;}
</style>

<div id="div1">
  <a href="#" onclick="expandSiblingParagraphs(this)">+</a>
  <p>Hello</p>
  <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Integer vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus, 
    sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
    Suspendisse nec.</p>
  <p class="hidden">Another hidden paragraph</p>
</div>

The Javascript I am trying:

var expandSiblingParagraphs = function(elt){
  $(this).parent()....?
};

I want to select all P’s that are children of the clicked element’s parent, and remove the hidden class from them. In the logic I don’t want to assume anything about the id of the containing div, or even that there is a containing div. I just want all P children of the parent container.

How do I do that?

In the selector syntax, I can find a way to get descendants or children. I can’t find a way to select parents or ascendants. Am I missing something?
thanks.

Answer 1

$(this).parent().children("p.hidden").removeClass("hidden");