Confusing jquery code

For some reason when i click book list element it shows both forms(books and classes) instead of just book form as if there is no break statement,i am really confused why is it doing that?

<html>
<head>
<script type="text/javascript">
$(document).ready( function(){
    $('.hideshares').hide();
    $('#shareupdate li').click(function(){
        switch($(this).attr('id')){
        case "book":
            $('.hideshares').hide();
            $('#bk').show();
            break;

case "class":
            $('.hideshares').hide();
            $('#cs').show();
            break;
        }
    }); 
});
</script>
</head>
<body>
<div>
    <ul id="shareupdate" >
        <li id="book" >Books</li>   
        <li id="class">classes</li>
    </ul>
</div>

<form id="cs" class="hideshares">
        <div><label>class:</label> <input type="text" id="cls" size="10"/></div>
        <div> <input type="radio" id="dntknw" name="dontknw"/>I don't know yet </div>
    </form>

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

I just tried it out, and it seemed to work correctly (with including JQuery the only addition to the file). Are you sure that the code you posted is the code you're running?

From a stylistic point of view, I think it would be much better to add separate event handlers to the two elements, rather than adding the same event handler to each and then having to switch on the ID.

Thank you for the advice.And actually the code i was running is a little different,but i figured that couldn't be the cause ,I will go over it again and see what i get...

Always be sure to post a self-contained code example that you know shows the issue.