jquery show/hide a div using bootstrap toggle checkbox not working

Question

I want to show a div based on checkbox toggle but my code is not working

<div class="row no-gutters mt-2">
    <div class="col-md-2">
        <label class="form-control text-white" style="background-color: steelblue">Was an equipment involved?</label>
    </div>
    <div class="col-md-2 text-center">
        <input id="Equip" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-width="200" data-height="40" data-onstyle="success" data-offstyle="danger">
    </div>
    <div id="equipText" class="col-md-2">
        <input class="form-control" placeholder="Add details on involved Equipment" />
    </div>
</div>

and jquery

<script>

        $(function () {
            $("#equipText").hide();
            $("#Equip").click(function () {
                if ($(this).is(":checked")) {
                    $("#equipText").show();
                }
                else {
                    $("#equipText").hide();
                }
                    
            });
        });

    </script>