how-to-show-and-hide-element-with-javascript

How to Show and Hide an Element with JavaScript

Showing and hiding elements dynamically is a common requirement when developing interactive web pages or applications. JavaScript provides multiple methods to achieve this functionality, allowing you to control the visibility of elements based on user interactions or other conditions.

In this article, we will explore three methods to show and hide elements using JavaScript. Each method offers a distinct approach: changing the element's display property, adding or removing CSS classes, or manipulating the visibility property. By understanding these techniques, you will gain the ability to create interactive user interfaces, build collapsible sections, or control the visibility of elements based on specific events or conditions. Let's dive in and explore the methods to effectively show and hide elements with JavaScript

01. Changing the Element's Display Property
02. Adding/Removing CSS Classes
03. Using Visibility Property

01. Changing the Element's "Display" Property

<!DOCTYPE html>
<html>
  <head>
    <title>Show and Hide Element | Ruustcode</title>
    <style>
      #target {
      display: none;
      margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <button onclick="toggleElement()">Toggle Element</button>
    <div id="target">This is the element to show/hide</div>
    <script>
      function toggleElement() {
        var element = document.getElementById("target");
        if (element.style.display === "none") {
          element.style.display = "block";
        } else {
          element.style.display = "none";
        }
      }
    </script>
  </body>
</html>

In this method, the CSS code sets the initial display property of the element (#target) to none, hiding it from view. The HTML contains a button with an onclick event that triggers the toggleElement() function when clicked. The JavaScript function retrieves the element by its id and checks its current display property. If the display property is none, it sets it to block to show the element. Otherwise, if the display property is not none, it sets it back to none to hide the element.

Read Also:

02. Adding/Removing CSS Classes

<!DOCTYPE html>
<html>
  <head>
    <title>Show and Hide Element | Rustcode</title>
    <style>
      .hidden {
      display: none;
      }
      #target{
      margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <button onclick="toggleElement()">Toggle Element</button>
    <div id="target" class="hidden">This is the element to show/hide</div>
    <script>
      function toggleElement() {
        var element = document.getElementById("target");
        element.classList.toggle("hidden");
      }
    </script>
  </body>
</html>

In this method, the CSS code defines a class called .hidden with a display: none property to hide the element. The HTML includes a button that triggers the toggleElement() function when clicked. The JavaScript function retrieves the element by its id and uses the classList.toggle() method to add or remove the .hidden class on the element, toggling its visibility.

Read Also:

03. Using Visibility Property

<!DOCTYPE html>
<html>
  <head>
    <title>Show and Hide Element | Rustcode</title>
    <style>
      #target {
      visibility: hidden;
      }
    </style>
  </head>
  <body>
    <button onclick="toggleElement()">Toggle Element</button>
    <div id="target">This is the element to show/hide</div>
    <script>
      function toggleElement() {
        var element = document.getElementById("target");
        if (element.style.visibility === "hidden") {
          element.style.visibility = "visible";
        } else {
          element.style.visibility = "hidden";
        }
      }
    </script>
  </body>
</html>

In this method, the CSS code sets the initial visibility property of the element (#target) to hidden, making it invisible but still occupying space. The HTML includes a button that triggers the toggleElement() function when clicked. The JavaScript function retrieves the element by its id and checks its current visibility property. If the visibility is set to hidden, it changes it to visible to show the element. Otherwise, if the visibility is not hidden, it sets

Read Also:

Archive