在div中顯示第一個元素並隱藏其餘的部分

Question

我目前已經有了這段代碼工作，隱藏了一切欄第一個'p'標籤，然後觸發一個點擊功能來切換其餘的divs p元素：

<div class="col"> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<ul> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
</ul> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>   
<div class="sub-content-btn">Find out more</div> 
</div> 

jQuery('.col').each(function() { 
    jQuery(this).find('p:not(:first)').hide(); 
    }); 

    jQuery('.sub-content-btn').click(function() { 
    jQuery(this).toggleClass('active'); 
    if(jQuery(this).hasClass('active')){ 
     jQuery(this).parent('.col').find('p').show(); 
    } else { 
     jQuery(this).parent('.col').find('p').hide(); 
     jQuery(this).parent('.col').find('p:first').show(); 
    } 
    }); 

我如何修改這個代碼隱藏p標籤和UI元素不僅僅是p標籤，然後切換所有元素？有問題的div會有ul的。

Answer 1

試試這個

jQuery('.col').each(function() { 
    var $this= jQuery(this); 
    $this.find(':not(p:first, .sub-content-btn)').hide(); 

}); 

jQuery('.sub-content-btn').click(function() { 
    var $this= jQuery(this); 
    var $parent= $this.parent('.col'); 
    $this.toggleClass('active'); 
    if($this.hasClass('active')){ 
    $parent.find('p').show(); 
    } else { 
    $parent.find('p').hide(); 
    $parent.find('ul').hide(); 
    $parent.find('p:first').show(); 
} 
}); 

Answer 2

試試這個：

jQuery('.col').each(function() { 
    jQuery(this).find(':not(p:first, .sub-content-btn)').hide(); 
}); 

jQuery('.sub-content-btn').click(function() { 
    var $btn = jQuery(this); 
    $btn.toggleClass('active'); 
    if ($btn.hasClass('active')) { 
    $btn.siblings().show(); 
    } else { 
    $btn.siblings().not('p:first').hide(); 
    } 
}); 

Example fiddle