how to hide one div and display another on button click event in MVC

Question

Here is my jquery and div i want to hide tblMain and make tblmainalt visible

$("btnUpdate").click(function() {
  alert("button");
  $("tblMain").hide();
  $("tblMainAlt").show();
});

<div id="tblMainAlt" class="tableSpaced" style="width:auto;height:100%;margin-left:25px;">
<div id="tblMain" class="tableSpaced" style="width:auto;height:100%;margin-left:25px;">

Answer 1

This is because you have used wrong selector. Either you have to use ID or CLASS selector. As seeing you HTML you please replace your jQuery with mine and it will worked.

$("#btnUpdate").click(function() {
  alert("button"); // Remove this line if it worked
  $("#tblMain").hide();
  $("#tblMainAlt").show();
});

Answer 2

set display: none in style in tblMainAlt because loaded first time a page so hide a div.

i have add sample code so you can try it.

JQuery:-

$("#btnUpdate").click(function () {
                alert("button");
                $("#tblMain").hide();
                $("#tblMainAlt").show();
            });

 <div id="tblMainAlt" class="tableSpaced" style="width:auto;height:100%;margin-left:25px;display: none;">

<div id="tblMain" class="tableSpaced" style="width:auto;height:100%;margin-left:25px;">