[jQuery] toggling classes/styles & writing LESS code

[jQuery] toggling classes/styles & writing LESS code


Hi jQueryers,
The dev continues on a visual typographic that teaches typography
while leveraging CSS.
I managed to hack out the next very BASIC piece of functionality, but
the code is verbose, certainly not DRY. I'd love some input as to how
to be more concise. Maybe creating a few variables, encapsualting some
functions, and/or taking advantage of jQuery magic with which I'm not
yet familiar? Also, is there a way to have only one "return false" at
the end rather than having to repeat it 5 times.
Thanks everyone for all your help!
Here's the whole page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TypeCSSet dev</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/* <![CDATA[ */
    .selected, .selected a { color: red; }
    #bodyCopy em { font-style: italic; }
/* ]]> */
</style>
<script type="text/javascript" src="/js/jquery-1.2.3.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
$(function() {
        $('#emStyles>li').click(function() {
            $(this).toggleClass('selected');
            return false;
        });
        $('#emStyles li#bold').toggle(function() {
         $('#bodyCopy>p>em').css('font-weight', this.id);
        },function(){
         $('#bodyCopy>p>em').css('font-weight', 'normal');
        });
        $('#emStyles li#italic').toggle(function() {
         $('#bodyCopy>p>em').css('font-style', 'normal');
        },function(){
         $('#bodyCopy>p>em').css('font-style', this.id);
        });
        $('#emStyles li#small-caps').toggle(function() {
         $('#bodyCopy>p>em').css('font-variant', this.id);
        },function(){
         $('#bodyCopy>p>em').css('font-variant', 'normal');
        });
        $('#emStyles li#uppercase').toggle(function() {
         $('#bodyCopy>p>em').css('text-transform', this.id);
        },function(){
         $('#bodyCopy>p>em').css('text-transform', 'none');
        });
});
// -->
</script>
</head>
<body>
<ul id="emStyles">
    <li id="bold"><a href="#">Bold</a></li>
    <li id="italic" class="selected"><a href="#">Italic</a></li>
    <li id="small-caps"><a href="#">Small Caps</a></li>
    <li id="uppercase"><a href="#">Full Caps</a></li>
</ul>
<div id="bodyCopy">
    

The darkness of the type as set in mass, which is not the same as
the <em>weight</em> of the face itself. The spacing of words and
letters, the leading of lines, and the incidence of capitals, not to
mention the color (i.e., darkness) of the ink and of the paper it is
printed on, all affect the color of the type.




</div>
</body>
</html>