Make div invisible and visible on button click using jquery
I have one button and when this button is clicked I have one div to show and hide. I have achieved this with jquery. but the problem is when the page loads the div is already shown. and i want that if i click the button then only the 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>
source to share
Use CSS to hide it by default:
#div1 {
display: none;
}
Please note that the jQuery method is live()
deprecated and should not be used. It has been replaced by on()
. Also, your element #div1
has an attribute runat="server"
set on it, which means ASP.Net will automatically generate an attribute id
for that element at runtime. You will need to get this id
with the method ClientID
:
$(document).on('click', '#btn', function() {
$('#<%= div1.ClientID %>').toggle();
});
source to share
You must use CSS to install display:none
in #div1
. Using:
#div1{
display:none;
}
Even if you can't use JS to hide your div on the page load
inside document.ready()
, so use .hide()
and your script becomes:
<script>
$(document).ready(function ()
{
$('#div1').hide(); //ADD THIS
$('#btn').live('click', function (event)
{
$('#div1').toggle('show');
});
});
</script>
source to share
you can use this
$('input').click(function() {
if ($('input').val() === "show") {
$('#div1').show('700');
$('input').val("hide");
} else{
$('#div1').hide('700');
$('input').val("show");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="button" id="btn" class="btncss" value="show" />
<div id="div1" runat="server" style="height:300px;width:300px;background-color:#f3fbd6; display: none;">
<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>
set display: none;
for # div1 and use my script
source to share
How does your #div1
element runat="server"
mean you are usingasp.netso you have to use Control.ClientID
CSS class should be used to hide the element along with the rest of the CSS rules
.myDiv {
display: none; //Hide it using CSS
height:300px;
width:300px;
background-color:#f3fbd6;
}
HTML, add CSS class to div
<div id="div1" runat="server" class="myDiv">
</div>
Script
$('#btn').live('click', function (event)
$('.myDiv').toggle();
//Or, You can use Control.ClientID
$("#<%= div1.ClientID %>").toggle();
});
source to share