i have one button and on the click of that button, i have one div to show and hide. i have achieved it using jquery. but problem is when page loads, div is already shown. and i want that, if i click on button then only div should be visible.
this is my code:
script:
<script>
$(document).ready(function() {
$('#btn').live('click', function(event) {
$('#div1').toggle('show');
});
});
</script>
html :
<input type="button" id="btn" class="btncss" value="filter" />
<div id="div1" runat="server" style="height:300px;width:300px;background-color:#f3fbd6">
<table>
<tr>
<td>
<asp:TextBox ID="txt" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>
<asp:Button ID="btncancel" runat="server" Text="cancel" />
</td>
<td>
<asp:Button ID="btnFilter" runat="server" CssClass="btncss" Text="Filter" />
</td>
</tr>
</table>
</div>
Use CSS to hide it by default:
#div1 {
display: none;
}
Note that jQuery's live() method is deprecated, and shouldn't be used. It was replaced by on(). Also, your #div1 element has the runat="server" attribribute set on it, which means ASP.Net will automatically generate an id attribute for that element at run time. You will need to retrieve that id using the ClientID method:
$(document).on('click', '#btn', function() {
$('#<%= div1.ClientID %>').toggle();
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments