Aspdotnet-Suresh

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

jQuery Show DIV, Hide DIV, Toggle DIV Content Example

Apr 5, 2013
Introduction:

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.
Description:
  
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="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Hide Div Content</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%;
padding:20px;
background:#EB5E00;
color:#fff;
margin-top:10px;
border-bottom:5px solid #FFF;
display:none;
}
</style>
</head>
<body>
<a href="#" class="showhide">Show/hide</a>
<div class="slidediv">
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
</div>
</body>
</html>
Live Demo

To check for live demo click on below button

Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com

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

Get the latest Asp.net, C#.net, 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

7 comments :

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
<?php
print_r($_GET);
# Want to pass the ID to php to feed to a database query
echo $ID;
?>
</div>

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

asdasdad

Give your Valuable Comments

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

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