<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="/libs/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').slideToggle(400);
return false;
});
});
</script>
</head>
<body>
<div id="slickbox" style="background: #eee; border: 1px solid #900;"><p>This is the box that will be shown and hidden and toggled at your whim. It has inline styles, which typically is a bad thing, but for the sake of our demonstration, we'll let it slide, right? <img src='http://www.learningjquery.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </div>
<a href="#" id="slick-toggle">Slide toggle the box</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="/libs/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.details').hide();
// toggles the slickbox on clicking the noted link
$('a.slick-toggle').click(function() {
$(this).prev('div.details').slideToggle(400);
return false;
});
});
</script>
</head>
<body>
<div id="slickbox" class="details" style="background: #eee; border: 1px solid #900;"><p>This is the box that will be shown and hidden and toggled at your whim. It has inline styles, which typically is a bad thing, but for the sake of our demonstration, we'll let it slide, right? <img src='http://www.learningjquery.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </div>
<a href="#" class="slick-toggle">Slide toggle the box</a>
<div id="slickbox" class="details" style="background: #eee; border: 1px solid #900;"><p>This is the box that will be shown and hidden and toggled at your whim. It has inline styles, which typically is a bad thing, but for the sake of our demonstration, we'll let it slide, right? <img src='http://www.learningjquery.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </div>
<a href="#" class="slick-toggle">Slide toggle the box</a>
</body>
</html>