How to change text via jQuery?

Question

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>

Answer 1

Use $('#more-less').text('show more'); instead of innerHTML.

jQuery wraps DOM Elements into jQuery objects, if you would want to use the innerHTML property, you could use the .html() function instead - but .text() is better as it will html-escape the content.

The alternative, to really access innerHTML property, is to get the DOM Element out of the jQuery object, as such: $('#more-less')[0].innerHTML = 'show more';.

Answer 2

I believe that you can use something like

$('#more-less').html("show more");

or

$('#more-less').html("show less");