MoreLesson 225Free preview

Toggle Text

This lesson is part of How To · All levels

Summary

Text toggle changes the text content of an element each time a button is clicked, for example from 'Show' to 'Hide'. The implementation is just reading the current value and then setting the alternative value. For plain text, use textContent to be secure and not HTML-processing.

Key points

Save two possible texts and exchange them based on the current conditions
TextContent is more secure than innerHTML for regular text
Update also attributes like aria-labels when the meaning of the button changes
Use one status source to keep text and view synchronized

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.