Jquery Slide "To"

Question

Alright,

I have a list of links off to the right where each link corresponds to their own div. The divs are "stacked" on top of each other. Basically I am having trouble trying to figure if I click on "link 4" how to make it slide down to div 4. And when you click on "link 1", how to get it to slide up to div 1. I guess I can't figure out how to make the div's slide up and down based on which link you click (if this can even be done).

HTML

<div id="slider"> 
    <div class="one"> </div> 
    <!--end slide-->  
    <div class="two"> </div> 
    <!--end slide-->  
    <div class="three"> </div>
    <!--end slide-->  
    <div class="four"> </div>
    <!--end slide-->  
</div>
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one">DLO</a>  
    <a href="#" id="link-two">test-a</a>  
    <a href="#" id="link-three">tes-a</a>  
    <a href="#" id="link-four">te-a</a>  
</div>

Answer 1

If I understand your question, you should be looking into the append() function. This code below works with jquery 1.4.3. I added some inline styles just to make the divs stand out on my page.

<div id="slider">
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div>
    <!--end slide-->
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div>
    <!--end slide-->
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div>
    <!--end slide-->
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div>
    <!--end slide-->
</div>
<!-- end slider -->
<div id="clicker">
    <a href="#" id="link-one" onclick="$('.one').append(this)">DLO</a>
    <a href="#" id="link-two" onclick="$('.two').append(this)">test-a</a>
    <a href="#" id="link-three" onclick="$('.three').append(this)">tes-a</a>
    <a href="#" id="link-four" onclick="$('.four').append(this)">te-a</a>
</div>

If you want to give it a cool little "fade in" effect you can hide the anchor text, then append it to the div, then fade it in. Looks a little cooler.

<div id="slider">
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div>
    <!--end slide-->
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div>
    <!--end slide-->
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div>
    <!--end slide-->
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div>
    <!--end slide-->
</div>
<!-- end slider -->
<div id="clicker">
    <a href="#" id="link-one" onclick="$(this).hide();$('.one').append(this);$(this).fadeIn();">DLO</a>
    <a href="#" id="link-two" onclick="$(this).hide();$('.two').append(this);$(this).fadeIn();">test-a</a>
    <a href="#" id="link-three" onclick="$(this).hide();$('.three').append(this);$(this).fadeIn();">tes-a</a>
    <a href="#" id="link-four" onclick="$(this).hide();$('.four').append(this);$(this).fadeIn();">te-a</a>
</div>