How to show or hide DIV using javascript and ASP.Net radio buttons

• First, add the radio buttons to the page and add the javascript onclick function to them to wire up the server side asp radio button to the client-side javascript functionality:

         <div class="row">  
             <div class="col-md-4"> Content to Show/Hide:</div>
             <div class="col-md-4">
          <asp:RadioButton ID="rbShowSub" onclick="ShowHideDiv(true)" runat="server"  Text="Show"/>
             </div>
              <div class="col-md-4">
                <asp:RadioButton ID="rbHideSub" onclick="ShowHideDiv(false)" runat="server" Text="Hide"/>          
            </div>
          </div>

• Enclose the content that you want to show or hide in a DIV and use the id attribute:

      <div class="row" id="subContent">

          // your content to show/hide

       </div>

• Now add the javascript function to ASPX page. Here use the id(subContent) mentioned in step above to set the style attribute to either show(block) or be hidden(none). In this method we are using the flag attribute to identify where the call is coming from:

        <script type="text/javascript">
           function ShowHideDiv(flag) {        
                var e = document.getElementById("subContent");        
                e.style.display = flag ? "block" : "none";
             }    
       </script>