How to show/hide a asp.net sub element with jquery

This method allows you to show/hide a form element without making another request against the server. It also works when the show/hide element is required by the asp.net code behind.

You can use any type of sub element under a dropdown with this script. You will need to use a CDN or download and host your own jquery-1.3.2.min.js file.

SCRIPT

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('#<%= Dropdown1.ClientID %>').change(function() { if (this.value=="My Value") { $('#<%= Element1.ClientID %> ').css({ visibility: 'visible' }); } else { $('#<%= Element1.ClientID %> ').css({ visibility: 'hidden' }); }}); }); </script>

HTML

<asp:DropDownList runat="server" ID="Dropdown1" class="required" ><asp:ListItem Value=""> none</asp:ListItem><asp:ListItem Value="My Value">Some Text Here</asp:ListItem></asp:DropDownList><!-- place any element here with id="Element1" -->