Hide or show div based on checkBox status

How can you show or hide a div element based on a checkBox status in ASP.NET Core 2.2 with Razor?

I have this but it doesn't work:

<script>
$(function() {
    $('#gridCheck1').change(function() {
        $('#ShowHideMe').toggle($(this).is(':checked'));
    });
});
</script>

<div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck1">
            <label class="form-check-label" for="gridCheck1">
                Example checkbox
            </label>
        </div>
    </div>
</div>

<div id="ShowHideMe">
    <p>some content</p>
</div>