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

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

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

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

How to import CSV files into DataTable in C#

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

go to top image