Skip to main content

How to Show or Hide a Form on Button Click in JavaScript

A common UI pattern is to toggle the visibility of a form or another element when a user clicks a button. This is essential for creating "show/hide" functionality for things like login forms, comment sections, or advanced search filters.

This guide will demonstrate the modern and recommended best practice for this task using CSS classes, as well as the more direct approach of manipulating an element's style property.

The Core Task: Toggling Visibility​

The goal is to have a button that, when clicked, will either show a form if it's hidden, or hide it if it's visible.

Consider this HTML structure:

<button id="toggle-form-btn">Toggle Form</button>

<form id="my-form" class="hidden">
  <!-- Form inputs go here -->
  <input type="text" placeholder="Your Name">
  <button type="submit">Submit</button>
</form>

We'll start with a "hidden" state and then use JavaScript to change it.

This is the recommended best practice because it cleanly separates your styles (CSS) from your logic (JavaScript).

The logic:

  1. Define a CSS class (e.g., .hidden) that sets display: none;.
  2. Use JavaScript to simply toggle this class on the form element when the button is clicked.

Solution:

/* A simple utility class to hide elements */
.hidden {
  display: none;
}

The classList.toggle() method handles all the logic for you. It adds the class if it's missing and removes it if it's present.

const toggleButton = document.getElementById('toggle-form-btn');
const myForm = document.getElementById('my-form');

toggleButton.addEventListener('click', () => {
  // classList.toggle() adds the class if it's not there,
  // and removes it if it is.
  myForm.classList.toggle('hidden');
});
note

This approach is clean, maintainable, and is the standard for modern web development.

Solution 2: Directly Toggling the style Property​

You can also achieve this by directly manipulating the style.display property of the form element. This is less maintainable for complex applications but can be useful for quick, simple scripts.

const toggleButton = document.getElementById('toggle-form-btn');
const myForm = document.getElementById('my-form');

// Hide the form initially with JavaScript
myForm.style.display = 'none';

toggleButton.addEventListener('click', () => {
  // Check the current display state and flip it.
  if (myForm.style.display === 'none') {
    myForm.style.display = 'block'; // Or 'flex', 'grid', etc.
  } else {
    myForm.style.display = 'none';
  }
});
note

This works well, but it mixes styling logic directly into your JavaScript, which can become harder to manage over time. The class-based approach is generally superior.

A Note on display: none vs. visibility: hidden​

It's important to choose the right CSS property for hiding your form.

  • display: none;: This removes the element completely from the document layout. It takes up no space, and other elements will reflow to fill its spot. This is the most common method.
  • visibility: hidden;: This makes the element invisible, but it still occupies its original space in the layout. This is useful if you want to avoid a "jump" in your page layout when the form appears or disappears.

To use visibility with the class-based approach:

.hidden {
  visibility: hidden;
}

While the JavaScript classList.toggle('hidden') code remains exactly the same.

Conclusion​

Toggling the visibility of a form is a fundamental UI task with a clear best practice.

  • The recommended best practice is to use CSS for styling and JavaScript for logic. Define a class (e.g., .hidden) that hides the element, and then use element.classList.toggle('hidden') to show or hide it.
  • Directly manipulating the element.style.display property is a valid alternative for simple cases but is less maintainable.
  • Choose between display: none and visibility: hidden based on whether you want the hidden form to continue occupying space in the page layout.

Table of Contents