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" "">

<html xmlns="">
<head runat="server">
    <script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(function () {
        $('.showhide').click(function () {
<style type="text/css">
width: 30%;
border-bottom:5px solid #FFF;
    <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>

Output will be like this ::


Popular posts from this blog

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

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

How to import CSV files into DataTable in C#

go to top image