jquery toggle function is not working

Question

I am making a form which is toggle (hide and show) with the help of button, but it is not working. Can anyone please review my code and tell why my script is not working. my code is below

$(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>

Please read [How do I format my code blocks?](http://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks) — Liam, Oct 04 '16 at 12:38
Please take care to format your question properly. This was almost unreadable — Rory McCrossan, Oct 04 '16 at 12:38
Can you turn on console in inspect element tool and provide the error shown there ? — Kapil Yadav, Oct 04 '16 at 12:40
Typo, voting to close: You're selecting by `id`, but your form has a *class*, not an `id`. — T.J. Crowder, Oct 04 '16 at 12:42
Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Oct 04 '16 at 12:43
change $("#facility-form").toggle('slow'); to $("#facility-form1").toggle('slow'); your form id is facility-form1 but mistakenly you have used facility-form in toggle function — Deepak Sharma, Oct 04 '16 at 12:47

score 5 · Accepted Answer · answered Oct 04 '16 at 12:42

You're selecting by id, but your form has a class, not an id; see ***:

$(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>

score 4 · Answer 2 · answered Oct 04 '16 at 12:42

4

You need to use the class selector not an ID selector

Change this line from,

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

To

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

Here is an working Fiddle : https://jsfiddle.net/pz6h4g7q/

Hope this helps!

answered Oct 04 '16 at 12:42

David R

14,711
7
54
72

score 2 · Answer 3 · answered Oct 04 '16 at 12:41

2

this is mistake

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

change to

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

answered Oct 04 '16 at 12:41

buildok

785
6
7

1

Why? You should explain your answer – Liam Oct 04 '16 at 12:44
Man just made a mistake, he knows exactly about the selectors in jQuery – buildok Oct 05 '16 at 11:55

score 2 · Answer 4 · answered Oct 04 '16 at 12:42

2

Change this:

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

to

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

facility-form is a class, not an ID.

answered Oct 04 '16 at 12:42

Goombah

2,835
2
12
22

jquery toggle function is not working

4 Answers4