Here is a simple example which shows to show/hide the content using jquery function.
Here is the <head> tag where the jquery has to be implemented.
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".flip").click(function () {
$(".details").slideToggle("slow");
});
$(".flip2").click(function () {
$(".cmpnyDetails").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.details,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.details
{
display:none;
}
div.cmpnyDetails,p.flip2
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.cmpnyDetails
{
display:none;
}
</style>
</head>
This is <body> tag where the details are given for the respective fields.
<body>
<form id="form1" runat="server">
<div class="details">
<p>My Name is ABC</p>
<p>I am working in XYZ Software Company</p>
</div>
<p class="flip">Click here to Show/Hide My Details :</p>
<div class="cmpnyDetails">
<p>XYZ Software solutions</p>
<p>New Street,Road No:1</p>
<p>PQR Colony,Hyderabad.</p>
</div>
<p class="flip2">Click here to Show/Hide Company Details</p>
</form>
</body>
Explanation:
In the above <head> tag, the first <script> tag is used to give the source of the jquery.This 'src' attribute is mandatory field.
In the second <script> tag, you have to implement the jquery functionality.
$(document).ready(function () {
The 'ready' is the first function that fires once the document gets loaded.
$(".flip").click(function ()
Here, '.flip' is the class name for the <p> tag.The 'click' function fires, once the <p> tag of particular class is clicked.
$(".details").slideToggle("slow")
Here. '.details' is the class name for the <div> tag. Once the 'click' function of the <p> fires,the content present in this <div> tag will be diplayed slowly, as you mentioned to display the content slowly with "slow" command in 'slideToggle' event.
Like-wise the same process repeats for the below code.
$(".flip2").click(function () {
$(".cmpnyDetails").slideToggle("slow")