[jQuery] Help with selecting great grandchildren
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>