jquery issue with slidetoggle()

Question

I have a div #up and and div #middle both inside a div #frame

with the css:

#frame{
    position: absolute;
    left:200;
    top:200;
    border-style: solid;
    border-width: 1px;
}

#middle{
    width:200px;
    height:200px;

}

#up{
    position:absolute;
    bottom:200;
    display:none;
}

When I click on #middle I'm slideToggling #up from bottom to top with the jQuery code:

$('#middle').click(function () {
    $('#up').slideToggle();
});

here a jsFiddle: http://jsfiddle.net/malamine_kebe/DCSuR/

my question : How can I also slideToggle the border top of #frame when #up is slideToggling

Answer 1

UPDATED FIDDLE

You can not toggle element's border with inner div which has position: absolute;

Look at the demo, I've added border to #up to all sides exept bottom, and make this div override parent's (#middle) with bottom: 201px;

UPDATE 2: I'm not sure if you need a tab effect like this

or like @Danko made link

Answer 2

I'ts just a CSS issue. When you use position: absolute the element can go outside without changing the parent frame. So if you change to position: relative it will works.

#up{
    position:relative;
    top: 0;
    display:none;
}

Updated Fiddle

Answer 3

I guess this could be something...

var i = 0;
$('#middle').click(function () {
    var tp = i % 2 === 0 ? $(this).offset().top - $('#up').height() : $(this).offset().top - 2;
    $('#frame').animate({
        top: tp
    });
    $('#up').slideToggle();
    i++;
});

FIDDLE

Answer 4

Check if this answers your question. UPDATE JAVASCRIPT

$('#middle').click(function () {
    $('#up').slideToggle(function(){
      $('#frame').css("borderTop","2px solid #000");  
    });
});

AND UPDATE CSS

#up{
    position:absolute;
    bottom:200px;
    display:none;
    border-top: 2px solid black;
}