[Solved] Show Hide DIV on CheckBox Check (Selected) using JavaScript not working with ASP.Net master page

Mehram
 
on Aug 11, 2021 10:58 PM
Sample_103179.zip
528 Views

Sir, 

Its not doing anything. my full code is as below.

<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" Runat="Server">
    <asp:UpdatePanel ID="upContent" runat="server">
        <ContentTemplate>
                        <section class="content">
                           <div class="row" id="divEntry" runat="server">
                            <div class="col-xs-12">
                                <table class="table table-bordered">
                                    <tr>
                                        <td>ID</td>
                                        <td colspan="3">
                                            <asp:TextBox ID="txtInvoiceID" runat="server" Width="100px" Enabled="false"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>GST / Non-Gst</td>
                                        <td colspan="3">
                                            <label class="switch">
                                                <input type="checkbox" onclick="toggle(this)" runat="server" id="chkTest" />
                                                <span class="slider round"></span>
                                            </label>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </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>
                       </section>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress DisplayAfter="0" ID="MPG1" AssociatedUpdatePanelID="upContent" runat="server">
        <ProgressTemplate>
            <div id="overlay">
                <div id="modalprogress">
                    <div id="theprogress">
                        <img alt="indicator" src="Images/loading.gif" />
                        <br />
                        <br />
                        Please wait while system is updating ...
                    </div>
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphBottom" Runat="Server">
    <script>
        function toggle(ele) {
            var cont = document.getElementById('cont');
            if (ele.checked) {
                cont.style.display = 'block';
            } else {
                cont.style.display = 'none';
            }
        }
</script>
</asp:content>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 12, 2021 05:33 AM
Mehram says:
    <script>
        function toggle(ele) {
            var cont = document.getElementById('cont');
            if (ele.checked) {
                cont.style.display = 'block';
            } else {
                cont.style.display = 'none';
            }
        }
</script>

Since you are using master page you have to use ClientID in getElementById function. Replace with below code.

<script>
    function toggle(ele) {
        var cont = document.getElementById('<%=cont.ClientID%>');
        if (ele.checked) {
            cont.style.display = 'block';
        } else {
            cont.style.display = 'none';
        }
    }
</script>