The jQuery toggle functionality seems to be malfunctioning

Question

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong?

$(document).ready(function () {
        $("#add_facility").click(function () {
            $("#facility-form").toggle('slow');
        });
    });

.facility-form {
        background-color: #e3edfa;
        padding: 4px;
        cursor: initial;
        display: none;
    }

 <button class="btn" id="add_facility">
    <i class="fa fa-plus" aria-hidden="true"></i> 
    Add Facilities
</button>
<div class="facility-form">
    <form id="facility-form1">
        <div class="row">
            <div class="col-md-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Internet
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Bar
                    </label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Free Wifi
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Spa
                    </label>
                </div>
           </div>
        </div>
    </form>
</div>

javascript jquery html css

Answer 1

Answer №1

Instead of selecting by id, make sure to target the correct element with a class in your form; check out the following code snippet for reference:

$(document).ready(function() {
  $("#add_facility").click(function() {
    $(".facility-form").toggle('slow');   // ***
  });
});

.facility-form {
  background-color: #e3edfa;
  padding: 4px;
  cursor: initial;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="add_facility">
  <i class="fa fa-plus" aria-hidden="true"></i> Add Facilities
</button>
<div class="facility-form">
  <form id="facility-form1">
    <div class="row">
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Internet
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Wifi
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Bar
          </label>
        </div>
      </div>
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free Wifi
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Spa
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Parking
          </label>
        </div>
      </div>
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Indoor Pool
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Family Rooms
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Smoking Rooms
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 2

Instead of selecting by id, make sure to target the correct element with a class in your form; check out the following code snippet for reference:

$(document).ready(function() {
  $("#add_facility").click(function() {
    $(".facility-form").toggle('slow');   // ***
  });
});

.facility-form {
  background-color: #e3edfa;
  padding: 4px;
  cursor: initial;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="add_facility">
  <i class="fa fa-plus" aria-hidden="true"></i> Add Facilities
</button>
<div class="facility-form">
  <form id="facility-form1">
    <div class="row">
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Internet
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Wifi
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Bar
          </label>
        </div>
      </div>
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free Wifi
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Spa
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Parking
          </label>
        </div>
      </div>
      <div class="col-md-4">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Indoor Pool
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Family Rooms
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Smoking Rooms
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 3

Answer №2

It's important to utilize the class selector instead of an ID selector

Replace this line with,

    $("#facility-form").toggle('slow');

To

    $(".facility-form").toggle('slow');

Check out this functional Fiddle : https://jsfiddle.net/pz6h4g7q/

I hope this resolves your issue!

Answer 4

It's important to utilize the class selector instead of an ID selector

Replace this line with,

    $("#facility-form").toggle('slow');

To

    $(".facility-form").toggle('slow');

Check out this functional Fiddle : https://jsfiddle.net/pz6h4g7q/

I hope this resolves your issue!

Answer 5

Answer №3

this isn't right

$("#facility-form").toggle('slow');

update to

$(".facility-form").toggle('slow');

Answer 6

this isn't right

$("#facility-form").toggle('slow');

update to

$(".facility-form").toggle('slow');

Answer 7

Answer №4

Revise this:

$("#facility-form").toggle('slow');

to

$(".facility-form").toggle('slow');

Remember, facility-form is a class, not an ID.

Answer 8

Revise this:

$("#facility-form").toggle('slow');

to

$(".facility-form").toggle('slow');

Remember, facility-form is a class, not an ID.

The jQuery toggle functionality seems to be malfunctioning

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Plugin using jQuery that adds a UserVoice-inspired feedback tab to any webpage

iOS users are experiencing issues with mobile responsiveness

It is not possible to submit two forms at once with only one button click without relying on JQuery

Steps for adding a forked version of a library in package.json

What could be the reason for the defaultCommandTimeout not functioning as expected in my script

Customizing the hover color of text in Bootstrap 5

Tips for sending and retrieving parameters using the POST technique

Using Jquery to add elements one by one

Choose the current parent item using Angular's ng-selected and $index

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

Iterate over div elements using jQuery

Using jQuery to toggle the visibility of a group of radio buttons causes the div to quickly appear and disappear

Wait for the scope value to become available before executing the directive or div

I need to update my database by sending requests to my API, as the changes are not being reflected in the current database state. I am eager to see the

Issue detected in FullCalendar: date.getFullYear is not functioning as expected

Issue with updating nested child object reference in Redux state input value

In the realm of JavaScript, what happens when a function yields yet another function while also welcoming another function as an argument?

Universal PM2 Configuration Settings in JSON Format

What is the best way to navigate between different areas of an image using html and javascript?

Unable to display shadows in Three.js