jQuery help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

jQuery help

Post 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>
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post 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>
Post Reply