How do I hide and show div tags based on toggle button switch

Question

How do I hide and show div tags based on toggle button switch

Donald Symmons 3,066

Is it possible to hide one div and hide the other on toggle button switch in C#? I don't currently know how to write a C# code for this, so I'm asking if anybody knows this to please help me out, so I will get to know. Also, my toggle button does not really look nice, if there is a way to make the toggle button look nice and also have texts inside of it (like landscape and portrait), so that when toggling it will show either of the texts, I will be grateful for this. I really need an idea on this: which is the best approach, having one webform that will hold two card modes(landscape and portrait), the I can switch between the two modes? OR having two web forms, each for landscape and portrait?

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="2.aspx.cs" Inherits="_2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>

@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">
        <div class="card" id="Card1" runat="server">
            <div class="col-sm-7" style="width: 100%; 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" />
                </asp:Panel>
            </div>
        </div>
        <div class="card" id="Card2" runat="server" visible="false">
            <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" />
                </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>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>

Accepted answer

0 additional answers

Your answer

Answer 1

Hi @Donald Symmons

Replace 'input' with 'asp:checkbox'. Write code at the same time:

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (Card1.Visible == true)
            {
                Card1.Visible = false;
                Card2.Visible = true;
            }
            else { 
                Card1.Visible = true;
                Card2.Visible = false;
            }
        }

<body>
   <form id="form1" runat="server">
        <div class="card" id="Card1" runat="server">
            <div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
                <asp:Panel Class="print-contents" ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
                  This is card One
                    <div>
                        aaaa bbbb
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Button for One" OnClick="Button1_Click" />
                </asp:Panel>
            </div>
        </div>
        <div class="card" id="Card2" runat="server" visible="false" >
            <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
                    <div class="wrap">
                        aaaa bbbb
                    </div>
                   <asp:Button ID="Button2" runat="server" Text="Button for Two" OnClick="Button2_Click"/>
                </asp:Panel>
            </div>
        </div>
        <br />
        <asp:Label ID="Label1" runat="server">Change Orientation</asp:Label>
        <div class="input-group">
            <label class="switch">
                <asp:CheckBox runat="server" AutoPostBack="true" id="CheckBox1" OnCheckedChanged="CheckBox1_CheckedChanged" />
                <span class="slider round"></span>
            </label>
        </div>
    </form>
</body>

Output: Test5

Best Regards,

Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-04-07T10:02:04.8066667+00:00

I appreciate your answer @QiYou-MSFT . Thanks

Share via

How do I hide and show div tags based on toggle button switch

0 additional answers

Your answer