Show/ Hide Div, Toggle Div on Button click using Jquery and JavaScript with example

Here I will explain how to show / hide div using jQuery. jQuery show & hide div content example. By using few lines of jQuery coding we can show or hide div content elements.

Write the below code for implementing this ::

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_Hide_Div.aspx.cs" Inherits="Show_Hide_Div" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(function () {
        $('.showhide').click(function () {
            $(".slidediv").slideToggle();
        });
    });
</script>
<style type="text/css">
.slidediv{
width: 30%;
height:auto;
padding:20px;
background:#FF0000;
color:#fff;
margin-top:10px;
border-bottom:5px solid #FFF;
display:none;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" class="showhide" shape="circle" style="border: thin solid #000000">Show Hide</a>
   <%-- <asp:Button ID="btn1" class="showhide"  runat="server" Text="Button" OnClientClick="return confirm('Are you sure?');" />--%>
    
    <div class="slidediv">    
<p>Aayush Singh</p>
<p>This is a div which could be shown/ hidden on click of button</p>
<p>A short javascript and Jquery has been used here.</p>
<p>Button has additional confirmation property i.e. on click it asks for ok or cancel. You may remove this property from button if not required</p>
    
    </div>
    </form>
</body>
</html> 

Output will be like this ::


Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image