How to hide one div and show another on a 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;">
+3
source to share
2 answers
This is because you used the wrong selector. Either you have to use a selector ID
or CLASS
. As you can see the HTML, please replace your jQuery with mine and it will work.
$("#btnUpdate").click(function() {
alert("button"); // Remove this line if it worked
$("#tblMain").hide();
$("#tblMainAlt").show();
});
+6
source to share
set display: not styled in tblMainAlt because first loaded on the page, so hide the div.
I have some sample code for you to try.
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;">
0
source to share