Simple jQuery toggle

Question

This is my 300th problem on this page and I am just exhausted. I have looked for while but cannot see what the heck I am doing wrong (I am new to jQ). I am at the v early stage of making something toggle on a checkbox. At the moment I am just firing the handler on click with no effort to check "checked" that come later and I think I am ok at that.

What the heck am I doing wrong please.

<div class="form-group  col-sm-3 colFlushR" id="endDateWrapper">
    <label class="control-label" for="zaq-endDate">End Date</label>
    <div class="input-group date colFlush" data-provide="datepicker" id="datepickerEnd">
        <input type="text" class="form-control" name="zaq-endDate" id="zaq-endDate">
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>

<div class="btn-group-xs" data-toggle="buttons"><br> &nbsp;
    <label class="btn btn-default" id="endDateYesNo">
        <span class="glyphicon glyphicon-unchecked"></span>
        <input type="checkbox" class="weekend day" value="zaq-satuxxxrday"
                name="saturday"> End Date?
    </label>
</div>

Simple script (or so I thought)

"use strict";
$(document).ready(function() {
    var $endWrap = $("#endDateWrapper")
//        $endWrap.hide()
    $("#endDateYesNo").on(click,function()
    {
        $endWrap.toggle();
    })
});

Answer 1

Try this:

$(document).ready(function() {
    var endWrap = $("#endDateWrapper")
    //  endWrap.hide()
    $("#endDateYesNo").on("click",function()
    {
        endWrap.toggle();
    });
});

Or if you want it slide it you can use this: endWrap.slideToggle();

Answer 2

You want $("#endDateYesNo").on("click",function() - notice the quotation marks around the event type click. The jQuery API page has more detailed information about the usage of on.

Alternatively, you could use $("#endDateYesNo").click(function()... instead, but the on method is newer and preferred as it can be easily used to delegate click listeners if needed.