need help with show and hide

need help with show and hide

Hello,

I hope someone can help me. I am in college and learning JS and jQuery. My teacher gave us an assignment to have a simple page that says I like fruit and a simple, underlined "Show More Info" line below it that, when the user presses, it slowly adds 4 fruits. The input, underlined line changes to "Hide More Info" as the 4 fruits come up.
Then, when the user clicks the "Hide More Info" button, the 4 fruits slowly leave and the "Show More Info" comes up.

This is probably VERY elementary to some of you, but it's baffling me. Please, if you can help, e-mail me or answer here, I'll check. I left the style info out for now.

Thanks.
  1. <script src="http://code.jquery.com/jquery-1.4.2.js"></script>
            <script type="text/javascript">
                function showMore()
                {
                    $("#navFruit").show("slow");
                    $("#navFruit").append("<br />cherries<br />strawberries<br />blueberries<br />pineapple");
                    $("#navSelect").html("Hide More Info");
                }
                function showLess()
                {
                    $("#navFruit").append("");
                    $("#navFruit").hide("slow");
                    $("#navItem").html("Show More Info");
                }
                $(function()
                {
                    $("#navItem").click(showMore, showLess);
                });            
            </script>    
        </head>
        <body>
            <div id="navbar">
                <p id="navFruit">I really like a lot of fruit</p>
            </div>
            <br />
            <div id="navSelect">        
                <span id="navItem">Show More Info</span><br />    
        </body>
    </html>