How to change text through jQuery?

Question

I am trying to change the “show more” text depending on the state. This does not work:

        <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 in jQuery objects if you want to use a property innerHTML, you can use a function instead .html(), but .text()better since the html is escape content.

An alternative to actually gain access to the property innerHTML, is to get a DOM element of jQuery object, as such: $('#more-less')[0].innerHTML = 'show more';.

Answer 2

I believe you can use something like

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

or

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

Answer 3

:

$('#more-less').innerHTML ='show less';   

:

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

Answer 4

innerHTML DOM, jQuery .html(), jQuery

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