Issue in hide and show form using html and js

I have one form which is having id ’ add_form’ and by default the form is hidden and I want to show this form on clicking a button named ‘open form’ In addition to this I have a side menu named 'show details ’ , when I click on this side menu then form should get hide

NOTE : The add_form button is global i.e it is present on every page of my website

How should I do it ?

Like this:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
     #add_form {
      display: none;

    <form id="add_form">
      <label for="name">Name:</label>
      <input id="name" placeholder="Enter Name" />

    <button id="open_form">Open Form</button>
    <button id="hide_form" disabled>Hide Form</button>

      const showForm = document.getElementById('open_form');
      const hideForm = document.getElementById('hide_form');
      const form = document.getElementById('add_form');

      showForm.addEventListener('click', () => { = 'block';
        showForm.disabled = true;
        hideForm.disabled = false;

      hideForm.addEventListener('click', () => { = 'none';
        showForm.disabled = false;
        hideForm.disabled = true;
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.