Question

I am looking to create a drop-down tab that sit on the top of the page, and when clicked it slides down to display some more links etc.

The links container will change in height, so Im trying to get jQuery to get the height of the container, and set the css top value to its negative integer, and when you click the tab, it slides down by the height of the links container.

Everything works fine apart from when the menu slides down, it doubles the value it should take. (There is a space between the top of the div and the page.)

The code for the div’s is as follows:

<div class="quickLinks">
    <div class="quickLinksContent">
        dsf
    </div>
    <div class="quickLinksTitle">Logout</div>
</div>

The CSS is as follows:

.quickLinks {
    position:relative;
    top:0px;
    width:150px;
    background-color:#3300FF;
}

.quickLinksTitle {
    height:30px;
    background-color:#CC6600;
    vertical-align:bottom;
    text-align:center;
}

.quickLinksContent {
    height:20px;
}

And Javascript is as follows:

$('.quickLinks').css({
    top: $('.quickLinksContent').height()*-1 + 'px'
});

$('.quickLinksTitle').click(function () {
    if ($('.quickLinksContent').offset().top < 1) { //if links are hidden
        $('.quickLinks').animate({
            top: $('.quickLinksContent').height()+'px'                       
        });
    }
    else { //if links are shown
        $('.quickLinks').animate({
            top: $('.quickLinksContent').height()*-1+'px'                        
        });
    }
});

I cant work it out. And yes I have tried dividing the height by 2, and it just halves the gap.

Thanks.

Answer 1

$('.quickLinksTitle').click(function () {

        $('.quickLinksContent').slideToggle();

});

CSS

.quickLinksContent {
    height:20px;
    display:none;
}

view here :http://jsfiddle.net/La2YH/