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#

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

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

Show GridView row details in tooltip on mouseover with jQuery using inside GridView in c#

go to top image