I have been trying to make my form show and hide when I click on a button but it is not working. I want to use vanilla javascript and have been trying to make it work with .classList.toggle() but it is working.

HTML

<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

CSS

#search-input{
  display: none;
}
.show{
  display: block;
}

JS

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

#search-input {
  display: none;
}

.show {
  display: block;
}

<button id="search-button" class="fa fa-laptop fa-2x">click me</button>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

I have been trying to make my form show and hide when I click on a button but it is not working. I want to use vanilla javascript and have been trying to make it work with .classList.toggle() but it is working.

HTML

<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

CSS

#search-input{
  display: none;
}
.show{
  display: block;
}

JS

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

#search-input {
  display: none;
}

.show {
  display: block;
}

<button id="search-button" class="fa fa-laptop fa-2x">click me</button>
<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." > 
</form>

• javascript
• css

Share Follow edited Jul 5, 2023 at 8:45 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Mar 28, 2020 at 13:43 ZakZak 94044 gold badges2222 silver badges4545 bronze badges 2

• 1 First, check if your click event is working. And put the <i> tag inside a button. – Sajeeb Ahamed Commented Mar 28, 2020 at 13:48
• 2 It's not that the classlist toggle wouldn't work, rather it's because the id rules override class rules when parsing the CSS rules. – Teemu Commented Mar 28, 2020 at 13:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

CSS Specificity

ID has greater specificity than a class. You would see it in the console the class would be scratched out in the rule pane when you inspect the element.

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

#search-input{
  display: none;
}
#search-input.show{
  display: block;
}

<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i id="search-button"class="fa fa-laptop fa-2x"></i>
<form id="search-form">
     <input id="search-input" type="text" name="search" placeholder="Search.."> 
</form>

It's happening because of CSS specificity. Because you're adding CSS to an element via ID, and then trying to overwrite that CSS by adding additional CSS via a class, it doesn't work. This happens because IDs get priority over classes.

You can fix this by being more specific with your CSS selectors:

#search-input.show{
  display: block;
}

OR

If you want a general solution for all elements with the .show class, you can do it by giving #search-input a class of "hide" and just give the .hide class the display: none property:

HTML

<form id="search-form">
     <input
       id="search-input"
       type="text" 
       name="search" 
       placeholder="Search.." class="hide"> 
</form>

CSS

.hide {
   display: none;
}
.show {
  display: block;
}

You can calculate CSS specificity with this nifty tool.

This is happening since in CSS #id style is given higher priority than a .class. You can fix this by adding !important to the .show style like:

DEMO:

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("show");
})

#search-input {
  display: none;
}

.show {
  display: block!important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/5.13.0/css/all.min.css"/>
<i id="search-button" class="fa fa-laptop fa-2x"></i>
<form id="search-form">
  <input id="search-input" type="text" name="search" placeholder="Search..">
</form>

!important - it means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

As mentioned the problem caused because of id vs class priority in css. I think you can manage this with only a hide class and toggle it. An alternative solution is like following:

const searchButton = document.querySelector("#search-button");
const searchInput = document.querySelector("#search-input");

searchButton.addEventListener("click", () => {
  searchInput.classList.toggle("hide");
})

.hide {
  display: none;
}

<i id="search-button" class="fa fa-laptop fa-2x">Click here to Hide </i>
<form id="search-form">
  <input id="search-input" type="text" name="search" placeholder="Search..">
</form>