Blind an element and change style css at same tyme

Problem

I'm working on my portfolio and need help to #blind an element and change style property at bottom element at same time.

The idea is to exist a fixed space between the two elements, like this one EXAMPLE

If u see the example when you click, a bar appears and the space between two remains. Then if u click again the element hide and the space remains the same!!

"#contacts" -> element i want to blind

"#line" -> element i want change the top property

Im trying to resolve using jquery function called "blind":

   $("#contacts").toggle("blind", {direction : "vertical"}, 500);

Then i get the top value of #line with if:

   var line = $( "#line" ); 
   var  position = line.position(); 
   var top = position.top;
   if(top == value){
   $("#line").animate({top:'100px'}, time);
   } else { ... }

Please help!!

Problem courtesy of: user1877745

Solution

I'd do it without jQuery UI by using the top value and z-index

var contactTop = 85,
    nextTop;
$(".oppen").click(function() {
        nextTop = nextTop !== contactTop ? contactTop : 5;
        $("#contacts").animate({top: nextTop}, 500);
    .....

Demo

To stop the queuing you can apply the same technique on #line in addition to using jQuery's .stop

var contactTop = 85,
    nextTop,
    lineStart = 100,
    lineEnd = 180,
    lineTop = 100;
$(".oppen").click(function() {
    nextTop = nextTop !== contactTop ? contactTop : 5;
    $("#contacts").stop().animate({top: nextTop}, 500);
    lineTop = lineTop !== lineStart ? lineStart : lineEnd;
    $( "#line" ).stop().animate({top:lineTop}, 500);
});

Demo

Solution courtesy of: Zach Saucier

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.