How to show/hide the content using jquery in VS2010 ?

Bharathi Cherukuri
Posted by Bharathi Cherukuri under jQuery category on | Points: 40 | Views : 1685
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")

Comments or Responses

Posted by: Akiii on: 2/6/2012 Level:Bronze | Status: [Member] | Points: 10
This is a great work, very useful !


Thanks and Regards
Akiii
Posted by: Samarmir on: 2/8/2012 Level:Starter | Status: [Member] | Points: 10
Nice
A nice thing would be if you could somehow include server interaction here (for asp.net mvc), forexample, if sending a mail, I would like to show the user a mail sent confirmation div (this div is nicely dressed with images and so on), when the mail has been sent successfully. Otherwise let him see a error div.
Posted by: Bharathi Cherukuri on: 2/8/2012 Level:Silver | Status: [Member] [MVP] | Points: 10
Hi Akiii
Thank you....

Login to post response