aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show DIV, Hide DIV, Toggle DIV Content Example

Apr 5, 2013

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.
In previous posts I explained many
jQuery slideUp slideDown slideToggle effects example, jQuery Enable / Disable Textbox Controls on WebPage, jQuery Show Hover Dropdown Menu, Simple jQuery modal popup example, jQuery show YouTube videos in popup window and many articles relating to JQuery, JavaScript. Now I will explain how to show or hide div or table elements on website using JQuery.

To implement this we need to write the code like as shown below

<html xmlns="">
<title>jQuery Show Hide Div Content</title>
<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;
<a href="#" class="showhide">Show/hide</a>
<div class="slidediv">
Welcome to
Welcome to
Welcome to
Welcome to
Live Demo

To check for live demo click on below button

Welcome to Welcome to Welcome to Welcome to

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Irtekaz Ahmed Khan said...

all the right cool work

Anonymous said...

ha lya have... :)

Bob Meetin said...

How do I change the code so that rather than opening plain text I pass an argument to the URL so that it can display some information based upon an ID? I tried this, but it is not seeing the ID:

<a href="#?id=99" class="showhide"&gtShow/hide</a&gt
<div class="slidediv"&gt
# Want to pass the ID to php to feed to a database query
echo $ID;

Anonymous said...

Hello, Thanks for the post.
Can you give an example , if there are more than one div, and if user clicks on first div then second one will close automatically, and if licks on second div first one will close automatically.

Anonymous said...

thanks...nice one

Mizanur said...

its nice , but when an event occurred such as (text_changed event in C# ) it does not work . please help me

Anonymous said...


Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.