Slide Up / Slide Down Content

Hi Everyone,

I have this script where you can click through a number of divs which only shows one particular div at a time and hides the rest.

So for example there are 5 links, if I click link1, Div1 will appear. If I click link2, Div1 will hide and Div2 will appear etc etc etc.

What I cant figure out is if a link is showing how do I hide all of them so none are appearing. Im using the slideUp and slideDown function. Should I be using the Toggle function. Here is my script so far I hope someone can help me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test</title>

<script type="text/javascript">

$(document).ready(function() {

   $('.hidable').hide();



   $('.link').each(function(){



   $(this).toggleClass("active").next();

   $(this).click(function(){

   var show=$(this).attr('rel');

   $('.hidable').slideUp('slow');

   $(show).slideDown('fast');

   });

   });

   });

   </script>

   </head>

   <body>



   <ul>

   <li class='link' rel='#div1'><a href="#">1</a></li>

   <li class='link' rel='#div2'><a href="#">2</a></li>

   <li class='link' rel='#div3'><a href="#">3</a></li>

   <li class='link' rel='#div4'><a href="#">4</a></li>

   <li class='link' rel='#div5'><a href="#">5</a></li>

</ul>



   <div id="boxes">

   <div class='hidable' id='div1'>div 1</div>

   <div class='hidable' id='div2'>div 2</div>

   <div class='hidable' id='div3'>div 3</div>

   <div class='hidable' id='div4'>div 4</div>

   <div class='hidable' id='div5'>div 5</div>

</div>

</body>

</html>

Topic Participants
bcorrigan19
kbwood.au
thomas.barrey

Slide Up / Slide Down Content

Slide Up / Slide Down Content

Topic Participants

bcorrigan19

kbwood.au

thomas.barrey