jQuery help
Posted: Wed Jun 27, 2007 5:28 am
I currently have the following code whcih all works just fine.
Now, what i want to do is add more <div> elements that all have their own toggle link so i can show or hide them independently.
Any clues on how to do this?
Now, what i want to do is add more <div> elements that all have their own toggle link so i can show or hide them independently.
Any clues on how to do this?
Code: Select all
<!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>