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

A hover effect in CSS that utilizes a psuedo element to overlay the primary element

Tips for sending the ampersand character (&) as a parameter in an AngularJS resource

Retrieve data from a JSON array using either JavaScript or PHP

Creating internal utility functions in Angular without exporting them as part of the module can be achieved by following a

Progressively increasing the time by 15 seconds during each iteration of the CSS @each loop

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

sending the properties from the menu component to the dish details

What is the best way to notify my form that a payment has been successfully processed?

Mysterious and never-ending loop that seems to loop endlessly and eludes my

What is the proper method for effectively employing destructuring?

Navigating through Node's asynchronous behavior

The data retrieved through ajax remains consistent every time

An error has occurred due to a connection timeout with the net.Socket

When using a Vue.js component, the value of this.$route can sometimes come back

I am facing difficulties installing packages such as react-bootstrap on my dashboard

Generate your own unique referral links today

How can you extract a specific object from a JSON string?

How can one utilize electron's webContents.print() method to print an HTML or text file?

Having trouble with json_decode in PHP? Learn how to effectively retrieve JSON data in PHP

Understanding and resolving asynchronous issues in jQuery success callback functions