I am trying to change the "show more" text depending on the state. This isn't working:

        <div id="description">
        text goes here
            </div>
            <div id="more-less-container">
                <a href="#" id="more-less">expand / collapse</a>
            </div>  
            <script>
            var open = false;
            $('#more-less').click(function() {
                if (open) {
                    $('#description').animate({height:'10em'}); 
                    $('#more-less').innerHTML ='show less';             
                }
                else {
                    $('#description').animate({height:'100%'});
                            $('#more-less').innerHTML ='show more'; 
                }
                open = !open;
            });
            </script>