• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using JavaScript to Show and Hide a Div

Using JavaScript to Show and Hide a Div

March 8, 2022 Leave a Comment

We can use JavaScript to show and hide a div using one button by combing the getElementById() method, the display property, and an if else conditional statement.

var displayStatus = document.getElementById("someDiv");
if ( displayStatus.style.display == 'none' ){
  displayStatus.style.display = 'block';
} else {
  displayStatus.style.display = 'none';
}

We can use JavaScript to show a div and hide a div, but to be able to toggle between the two, we can do so using the code above.


Let’s say we have the following html:

<div id="div1">This is a hidden div that we can show with JavaScript</div>

If we want to use JavaScript to show hide the div, we can do so by targeting the element’s display property. We do this simply by getting the id of the div and then changing its display property to “block” if it is hidden, or “none” if it is shown. We check this with an if-else conditional statement.

var displayStatus = document.getElementById("div1");
if ( displayStatus.style.display == 'none' ){
  displayStatus.style.display = 'block';
} else {
  displayStatus.style.display = 'none';
}

Note that we can also show/hide (or toggle) a div easily using jQuery with the toggle() method.

Using JavaScript to Show/Hide a Div With a Click

We can use JavaScript to show/hide a div very easily by combining the display property and an if-else conditional statement with an onclick event.

Let’s say that we have the following HTML where we want to give the user the ability to show and hide the div #div1. The div will just be a greenish box that will be shown to start.

Here is the HTML code:


<style>#div1 { width: 300px; height: 200px; background: #7bbfa2; }</style>
<div>
  <div id="div1"></div>
  <div class="click-me" onclick="toggleDiv()">Show/hide div</div>
</div>

In the JavaScript code, we will add an onclick event to a button that will run a function we will create. In the function, we will simply change the display property of the div to “block” if it is hidden, or “none” if it is shown.

Here is the JavaScript code:

function toggleDiv(){
  var displayStatus = document.getElementById("div1");
  if ( displayStatus.style.display == 'none' ){
    //If the div is hidden, show it
    displayStatus.style.display = 'block';
  } else {
    //If the div is shown, hide it
    displayStatus.style.display = 'none';
  }
};

The final code and output for this example of using JavaScript to show/hide a div with a click is below:

Code Output:

Show/hide div

Full Code:

<style>#div1 { width: 300px; height: 200px; background: #7bbfa2; }</style>
<div>
  <div id="div1"></div>
  <div class="click-me" onclick="toggleDiv()">Show/hide div</div>
</div>

<script>

function toggleDiv(){
  var displayStatus = document.getElementById("div1");
  if ( displayStatus.style.display == 'none' ){
    displayStatus.style.display = 'block';
  } else {
    displayStatus.style.display = 'none';
  }
};

</script>

Hopefully this article has been useful for you to understand how to use JavaScript to show and hide a div.

Other Articles You'll Also Like:

  • 1.  Remove the Last Element From Array in JavaScript
  • 2.  JavaScript join – Create String from Elements in an Array
  • 3.  Convert a Set to Array in JavaScript
  • 4.  Using JavaScript to Add Items to Set
  • 5.  JavaScript onkeydown – How to Use onkeydown Event with JavaScript
  • 6.  JavaScript Change Text Color of a Paragraph
  • 7.  How to Use JavaScript to Change Text in Span
  • 8.  JavaScript Random Boolean – How to Generate Random Boolean Values
  • 9.  How to Remove All Numbers From String in JavaScript
  • 10.  Using JavaScript to Show a Div

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy