A tricky javascript thing I'm wanting to do...pulling elements from a list and hiding the rest

Question

As usual, I want to do more than I know how to do yet :-D

Here's what I'm working on...I'm writing up a Bio.

But within the bio, I want a "long bio" and a "short bio" button.

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.

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

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.

Here' what I'm trying to accomplish:

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

I do have jquery on this project if that helps...

Answer 1

First thing I'm noticing here is you're using IDs for the list items; it would probably be better to use a class there. Anyway, here's something I put together quickly. It's not tested, but I'll test it right after I post this answer. Edit: It's tested now. (and it works)

$(function() {
    $("#toggle_bio").click(function() {
        $(this).toggleClass("collapsed");
        $("#bio li:not(.remain)").toggle("slow");
        return false;
    });
});

This is an example of how you'd format the list:

<ul id="bio">
    <li>Nunc tempus mi non enim viverra tristique non pellentesque elit.</li>
    <li class="remain">Donec molestie rhoncus urna, ac vehicula risus malesuada nec.</li>
    <li>Vivamus vel mauris mi, tincidunt gravida nisi.</li>
    <li class="remain">Pellentesque sit amet metus ac nisi vulputate commodo dignissim quis dolor.</li>
    <li>Cras aliquam urna ultricies neque fermentum laoreet.</li>
    <li>Phasellus nec magna id lacus condimentum accumsan sollicitudin eget orci.</li>
</ul>

...and this is how you could add the toggle button:

<a id="toggle_bio" href="#">Toggle bio</a>

And finally, if you want to bold the ones that don't go away, you can use this CSS:

.remain {
    font-weight:bold;
}