jQuery show more
<p>hoping someone can help me. </p>

<p>I'm trying to have a "show more" link expand a hidden div and have the "show more" to disappear, but I need the list item its in to disappear as well. This needs to apply to multiple lists on the same page, and I need to be able to customize the "show more" text on a item by item basis. </p>

<p>Something that looks like this: </p>

<pre><code>&lt;ul&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;&lt;a class="toggle"&gt;Show More...&lt;/a&gt;&lt;/li&gt;
&lt;div class="toggle-wrap"&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;/div&gt;
&lt;/ul&gt;
</code></pre>

<p>When you click the "Show More" it looks something like this:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li style="display: none;"&gt;&lt;a class="toggle"&gt;Show More...&lt;/a&gt;&lt;/li&gt;
&lt;div class="toggle-wrap"&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;li&gt;Item&lt;/li&gt;
&lt;/div&gt;
&lt;/ul&gt;
</code></pre>

<p>Any ideas?</p>
