Show hidden div on click from jqgrid TD not working

Question

Using MVC5. I have a jqgrid that when any TD is clicked on, I want to show a hidden div. I can capture the TD click, but I can't get the div to show. The div is hidden using bootstraps 'hidden' class, which looks like all it does is set the display to none.

jquery:

    $("#mobile-grid").on("click", "td", function () {
        $("#mobile-options").toggleClass('hidden show');
    })

jqgrid div:

  <table class="table table-bordered table-striped" id="mobile-grid"></table>

Hidden div:

<div id="mobile-options" class="hidden">
  <div class="tile tile-blue">
     <h2>Required Mobile Options</h2>
   .....
   </div>
</div>

I have also tried:

    $("#mobile-grid").on("click", "td", function () {
        $("#mobile-options").toggle();
    })

and

    $("#mobile-grid").on("click", "td", function () {
        $("#mobile-options").show();
    })

Answer 1

Try using the 'hidden' attribute for the hidden div, insead of the hidden class, and then you can toggle. Like this:

multiKey.get("key1","key2",?);

$('#mobile-grid tr').on("click", notify);

function notify() {
  alert("clicked");
  $('#mobile-options').toggle();
}