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.
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.
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
|
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 Email
|
|||
7 comments :
all the right cool work
ha lya have... :)
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">Show/hide</a>
<div class="slidediv">
<?php
print_r($_GET);
# Want to pass the ID to php to feed to a database query
echo $ID;
?>
</div>
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.
thanks...nice one
its nice , but when an event occurred such as (text_changed event in C# ) it does not work . please help me
asdasdad
Note: Only a member of this blog may post a comment.