Edit Article

Edited by Viral, Maluniu, Zoe Volt, Warp550 and 10 others

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.



Ad

Edit Steps

  1. 1
    Wrap the content you want to toggle display with in a container. 
    <div ID="content" style="display:block;">This is content.</div>
    Ad
  2. 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. 3
    Use an event handeler to trigger the function. 
    <button onclick="toggleContent()">Toggle</button>
    Ad

Edit Tips

Ad

Edit Related wikiHows

How to
Make a Collapsible List in HTML Without Java

How to
Display HTML Code

How to
Use the Javascript Confirm Function

How to
Create Javascript Conditional Operators

How to
Make Blinking Text Without the Text Tag or Javascript

Article Info

Categories: JavaScript

Recent edits by: Chris, General Rommel, Peter Mortensen

In other languages:

Español: Cómo alternar la visualización HTML con JavaScript

Ad

Thanks to all authors for creating a page that has been read 59,227 times.

Was this article accurate?

YesNo
x

Thank Our Volunteer Authors.

Follow us on Google+