Page 1 of 1

jQuery help

Posted: Wed Jun 27, 2007 5:28 am
by JayBird
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?

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>

Posted: Wed Jun 27, 2007 6:35 am
by JayBird
Done

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)
        
       $('.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>