Jquery how to select elements below an id/class without being the parent?

Question

I am trying to make a button that toggles every <p> below it.

Here is the HTML:

<p>SHOW</p>
<p>SHOW</p>
<p>SHOW</p>

<a id="hc-more-info">MORE INFO</a>

<p>HIDE</p>
<p>HIDE</p>
<p>HIDE</p>
<ul> ... <ul>

jQuery (this is what I got so far) How do I start with them hiden?

jQuery('#hc-more-info').click(function(){
        jQuery(this).parent().nextAll('p, ul').toggle();
    });

Any help would be very appreciated! Thanks!

Answer 1

Can use nextAll() which will include all siblings that follow current element

jQuery(function($){
    $('#toggle-below-button').click(function(){        
       var $btn = $(this), showMore = !$btn.hasClass('show-all');
       $btn.toggleClass('show-all')
            .text( showMore  ? 'LESS INFO' :'MORE INFO')
            .nextAll()
            .toggle();       
    });
});

Answer 2

You can use $('p') as a selector

EDIT

Forgive me for not understanding before until the comment. You can use the .next method too but in my view a better practice would be to assign some class to the elements below and then toggle like $('p.toggle') to control it.

Answer 3

jQuery('#hc-more-info').click(function(){   
     jQuery(this).parent().nextAll('p').toggle();
});