CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcmodel-view-controller
Shridhar Salunkhe
Shridhar Salunkhe

Reputation: 162

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

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;">

Upvotes: 4

Views: 10904

Answers (2)

Nayan Patel
Nayan Patel

Reputation: 154

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;">

Upvotes: 0

Rana Ghosh
Rana Ghosh

Reputation: 4674

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();
});

Upvotes: 6

Related Questions