<title>jQuery Show/Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Additional CSS to format show/hide content */
a.showhideit, a.hide {color:blue; text-decoration:underline; cursor:hand;}
/* CSS to create round corners */
/*this style is not necessary when scripting is enabled, but if scripting is turned off it displays content on background, just without round corners.*/
.roundbox {
background:#fff url(img_rounded_corners/ms.gif) repeat-x 0px 0px;
color:#000;
}
/*styling for round corners*/
.dialog {
/*width:67%;*/
margin:0px auto;
/*min-width:20em;*/
color:#000;
}
.dialog .hd .c,
.dialog .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}
.dialog .ft .c {
height:14px;
}
.dialog .hd {
background:transparent url(img_rounded_corners/tl.gif) no-repeat 0px 0px;
}
.dialog .hd .c {
background:transparent url(img_rounded_corners/tr.gif) no-repeat right 0px;
}
.dialog .bd {
background:transparent url(img_rounded_corners/ml.gif) repeat-y 0px 0px;
}
.dialog .bd .c {
background:transparent url(img_rounded_corners/mr.gif) repeat-y right 0px;
}
.dialog .bd .c .showhideme {
margin:0px 8px 0px 4px;
background:#fff url(img_rounded_corners/ms.gif) repeat-x bottom;
padding:0em 1em 0.5em 1em;
font-family:sans-serif;
font-size:0.7em;
}
.dialog .ft {
background:transparent url(img_rounded_corners/bl.gif) no-repeat 0px 0px;
}
.dialog .ft .c {
background:transparent url(img_rounded_corners/br.gif) no-repeat right 0px;
}
</style>
<script type="text/javascript" src="../jquery/js/jquery.js"></script>
<script type="text/javascript" src="../jquery/js/jquery_ui_custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Add HTML to the element with the class 'showhideme'.
var content = "<div class='dialog' style='display:none'><div class='hd'><div class='c'></div></div>" +
"<div class='bd'><div class='c'><div class='showhideme'>" +
"<div style='width:100%; text-align:right; position:relative; top:-5px;'>" +
"<a class='hide'><img src='close.gif' border='0' alt='Click to hide'/></a></div>" +
$(".showhideme").html() + "</div></div></div><div class='ft'><div class='c'></div></div></div>"; // create a variable and add div tags to the content of .showhideme
$(".showhideme").html(content); // Replace the contents of .showhideme with our new variable
// Toggle elements with the class 'showhideit' when elements with the class 'showhideit' is clicked.
$(".showhideit").click(function () {
$("a.showhideit").toggle();
});
// Show element with the class 'dialog' when element with class 'show' is clicked
$(".show").click(function () {
$(".dialog").show("blind", {}, 2000); //show the content - effects: blind, clip, drop, explode, fold, puff, slide, scale, size, pulsate.
});
// Hide element with the class 'dialog' when element with class 'show' is clicked
$("a.hide").click(function () {
$(".dialog").hide("blind", {}, 1000);
});
});
</script>
</head>
<body>
<!-- Our links to toggle the view of 'showhideme' -->
<p><a class="showhideit hide" style="display:none" >Hide it</a><a class="showhideit show" >Show it</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet leo.</p>
<!-- Our text to show when showhideit is clicked -->
<div class="showhideme" display="none">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet leo. Donec eget risus quis diam posuere sagittis.
Sed nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget elit. Proin adipiscing diam.
Sed convallis eros non justo. Donec vestibulum quam nec elit. Suspendisse hendrerit. Duis sodales imperdiet ligula. Quisque at urna ac nisl venenatis varius.
Donec viverra lorem vel enim. Aliquam vel lorem vitae tellus pretium aliquet. Maecenas tristique ornare augue. Etiam sollicitudin egestas elit.
Vestibulum eget eros sed magna gravida mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi a lectus.
Donec leo augue, faucibus vel, tincidunt vitae, tempor id, arcu
</div>
<p>Duis sodales imperdiet ligula. Quisque at urna ac nisl venenatis varius. Donec viverra lorem vel enim. Aliquam vel lorem vitae tellus pretium aliquet.
Maecenas tristique ornare augue. </p>
</body>
</html>