Show Hide DIV on CheckBox Check (Selected) using JavaScript in ASP.Net

Mehram
 
on Aug 10, 2021 11:07 PM
Sample_140706.zip
403 Views

Sir,

Need your help, on toggle button need to show/hide DIV

Toggle button 

<tr>
    <td>GST / Non-Gst</td>
    <td colspan="3">
        <%--<label class="fancy-checkbox-toggle">
        <input type="checkbox" id="chkTest" value="1" name="chkGST" />
        </label>--%>
        <label class="switch">
            <input type="checkbox" onclick="toggle(this)" runat="server" id="chkTest" />
            <span class="slider round"></span>
        </label>
    </td>
</tr>

 Div

<div runat="server" style="display:none;" id="cont">
    <table class="table table-bordered">
        <tr>
            <td>ID</td>
            <td colspan="3">
                <asp:TextBox ID="TextBox1" runat="server" Width="100px" Enabled="true" ></asp:TextBox>
            </td>
        </tr>
    </table>
</div>

 JavaScript

<script>
    function toggle(ele) {
        var cont = document.getElementById('cont');
        if (cont.style.display == 'block') {
            cont.style.display = 'none';
            // document.getElementById(ele.id).value = 'Show DIV';
        }
        else {
            cont.style.display = 'block';
            //  document.getElementById(ele.id).value = 'Hide DIV';
        }
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 10, 2021 11:42 PM

Hi Mehram,

Refer below code.

HTML

<label class="switch">
    <input type="checkbox" onclick="toggle(this)" runat="server" id="chkTest" />
    <span class="slider round"></span>
</label>
<div runat="server" style="display: none;" id="cont">
    <table class="table table-bordered">
        <tr>
            <td>ID</td>
            <td colspan="3">
                <asp:TextBox ID="TextBox1" runat="server" Width="100px" Enabled="true"></asp:TextBox>
            </td>
        </tr>
    </table>
</div>
<script>
    function toggle(ele) {
        var cont = document.getElementById('cont');
        if (ele.checked) {
            cont.style.display = 'block';
        } else {
            cont.style.display = 'none';
        }
    }
</script>