Daphne Watson

I’ve used the toggle method many times when building a new web feature. Oftentimes, a button on a webpage that uses the hide/show functionality — aka toggle — is a common part of the user experience.

That’s where toggle comes in! Think of toggle like a switch for ‘on’ and ‘off.’ It hides or shows an element alternatively. Read more on toggle on the MDN Web Docs.

When using toggle, I code with vanilla JavaScript while accessing the DOM. I’ll place a CSS style property of “display:none;” on an element and use a JS Event (for example, onClick) to activate the toggle method.

Here’s my codepen snippet to see toggle in action with a hide/show button on some article content.

Happy coding!

-D.

--

--

Daphne Watson

Daphne Watson

Technical writer for Microsoft. California local.