Below is my html/EE code: <pre> <div class="less-info">
<!-- Standard configuration --> <!-- Show more button --> <span class="show-more">{lang_showmoreinfo}</span> <!-- Standard configuration tab --> <span class="tab">{lang_standardconfigurations}</span> <!-- Parts list --> <ul class="part-detail-box"> {related_entries id="cf_products_parts"} <!-- loop --> <li class="line-item"> <!-- Part number - floated right --> <span class="part-number">{cf_parts_partnumber}</span> <!-- Part title - aligned left --> {cf_parts_title} {if cf_parts_desc} <div class="line-item-detail"> {cf_parts_desc} </div> {/if} </li> {/related_entries} <!-- end loop --> </ul> <!-- part-detail-box --> </div> <!-- less-info --> </pre> What I want is for the user to click the span.show-more and have it toggle show/hide all li.line-item's within its own parent (div.less- info). I tried all types of stuff. I can get the parent to show/ hide, so I can get that far. From there I need to get to all child li.line-items. Here is what i stopped with, which I know is incorrect snce children() only selects direct children: <pre> //toggle the display of the individual product details $(".show-more").toggle( function() { $(this).parent().children(".line-item").show(); }, function() { $(this).parent().children(".line-item").hide(); } ); </pre>