[jQuery] Help with selecting great grandchildren

[Chuck Cheeze]

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>