How to Toggle HTML Display With JavaScript

Last Updated: October 8, 2020 Tested

Here's a quick JavaScript trick to control display settings. All we do is set the display of an element to none, and then use a JavaScript function to toggle the display when a user clicks something else.

Steps

1
Wrap the content you want to toggle display with in a container.
```
<div id="content" style="display:block;">This is content.</div>
```
2
Insert JavaScript code to change the display.
```
<script type="text/javascript">
function toggleContent() {
  // Get the DOM reference
  var contentId = document.getElementById("content");
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" : 
contentId.style.display = "block"; 
}
</script>
```
3
Use an event handler to trigger the function.
```
<button onclick="toggleContent()">Toggle</button>
```

Community Q&A

Question

How do I create CSS animation in JavaScript?

A_random_reader

Community Answer

You might want to use jQuery animations. More information and documentation is available at api.jquery.com.