How can I display more content and change the name of a more button?

The problem is quite simple. We have too much text on a page and want to hide some of this text and only show it when needed. This function should happen via a button. This is labeled “More” and should change to “Less” when the rest of the text is faded in.

Solution: The following code snippet now changes this condition.

// #btn-mehr is the ID of the button, #mehr-text is the ID of the hidden content

jQuery( document ).on( 'click',  '#btn-mehr', function( event ) {
   event.preventDefault();
   jQuery('#mehr-text').fadeToggle("slow");
   if(jQuery('#btn-mehr .button-text').text() == "Mehr"){
       jQuery('#btn-mehr .button-text').text("Weniger");
    }else{
       jQuery('#btn-mehr .button-text').text("Mehr");
    }
});

And so that the corresponding content is also hidden in advance, some CSS code must be used.

#mehr-text {
    display: none;
}