Hi RichardSa,
Refer below sample.
HTML
<head runat="server">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<title></title>
<style>
@media screen and (min-width: 1200px) {
#content { width: 100%; }
}
.toggle input[type="checkbox"] { display: none; }
@media screen and (min-width: 360px) and (max-width:640px) {
#content { width: 100%; }
}
#lblright { float: right; position: center; right: 5px; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.fs-drop-op { opacity: 0; }
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
/* Rounded sliders */
.slider.round { border-radius: 34px; position: absolute; }
.slider.round:before { border-radius: 50%; }
#PermitPrint { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnToggle" OnClick="OnPanelChange" runat="server" Text="Change Panel" />
<div class="card" id="Card1" runat="server">
<div class="col-sm-7" style="width:300px; height:300px; background-color:antiquewhite; margin-bottom: 1%;">
<asp:Panel Class="print-contents" ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
This is card One
<%--<asp:Button ID="Button1" runat="server" Text="Button for One" />--%>
<br />
<asp:TextBox ID="txtPanel1" runat="server" ></asp:TextBox>
</asp:Panel>
</div>
</div>
<div class="card" id="Card2" runat="server" style="width:300px; height:300px; background-color:aqua;" >
<div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
<asp:Panel Class="print-contents" ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
This is Card Two
<%--<asp:Button ID="Button2" runat="server" Text="Button for Two" />--%>
<br />
<asp:TextBox ID="txtPanel2" runat="server" ></asp:TextBox>
</asp:Panel>
</div>
</div>
<br />
<asp:Label ID="Label1" runat="server">Change Orientation</asp:Label>
<div class="input-group">
<label class="switch">
<input type="checkbox" id="chkBox1" onchange="toggleCardMode()" />
<span class="slider round"></span>
</label>
</div>
</form>
</body>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
Card1.Visible = true;
Card2.Visible = false;
}
}
protected void OnPanelChange(object sender, EventArgs e)
{
if (Card1.Visible)
{
Card1.Visible = false;
Card2.Visible = true;
}
else if (Card2.Visible)
{
Card1.Visible = true;
Card2.Visible = false;
}
}
Screenshot
