A tricky javascript thing I'm wanting to do...pulling elements from a list and hiding the rest
<p>As usual, I want to do more than I know how to do yet :-D</p>

<p>Here's what I'm working on...I'm writing up a Bio.</p>

<p>But within the bio, I want a "long bio" and a "short bio" button.  </p>

<p>The long bio will obviously display the whole bio, but the short bio would grab elements in the list and make them bold and contract the div to now only contain those list elements.</p>

<p>I know it soulds tricky (and may be a little too 'flashy') but I'm hoping to do it in a classy way.  </p>

<p>I can accomplish a lot of what I want to do with the animatedcollapse script, but not exactly because that would just hide the big list and make a separate div of the small list visible. </p>

<p>Here' what I'm trying to accomplish:</p>

<pre><code>&lt;div id="bioWrap"&gt;
&lt;h2&gt;Bio&lt;/h2&gt;
&lt;p&gt;Below is the bio you can read...&lt;a href="" onclick="toggle The Long Bio And make the long bio and short bio buttons visable"&gt;read more&lt;/a&gt;&lt;/p&gt;
&lt;div id="bioTrigger"&gt;
&lt;input type="button value="long"&gt;&lt;input type="button value="short"&gt;
&lt;ul&gt;
&lt;li&gt; This would be text within the long bio&lt;/li&gt;
&lt;li&gt; This would be text within the long bio&lt;/li&gt;
&lt;li id="This would remain in the li when short button is clicked"&gt; This would be text within the long bio&lt;/li&gt;
&lt;li&gt; This would be text within the long bio&lt;/li&gt;
&lt;li id="This would remain in the li when short button is clicked"&gt; This would be text within the long bio&lt;/li&gt;
&lt;li&gt; This would be text within the long bio&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I do have jquery on this project if that helps...</p>
