basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.

$(document).ready(function(){
    var orig = $(".dropDown").outerHeight(); // 104
    var top = $(".dropDown").css("top");
if(top == "0px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "-100px"}, 400, 
            function(){
var top = $(".dropDown").css("top");
alert(top);                 
        })
    })
}
// else{
//  $(".selector").on("click", function(e){
//      $(".dropDown").animate({top : "0px"}, 400);
//      $("body").css({"background-color" : "green"})
//  })
// }
if($(".dropDown").css("top") == "-100px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "0px"}, 400);
        $("body").css({"background-color" : "green"})

    })
}

});

logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.

Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.

while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.

$(document).ready(function(){
    var orig = $(".dropDown").outerHeight(); // 104
    var top = $(".dropDown").css("top");
if(top == "0px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "-100px"}, 400, 
            function(){
var top = $(".dropDown").css("top");
alert(top);                 
        })
    })
}
// else{
//  $(".selector").on("click", function(e){
//      $(".dropDown").animate({top : "0px"}, 400);
//      $("body").css({"background-color" : "green"})
//  })
// }
if($(".dropDown").css("top") == "-100px"){
    $(".selector").on("click", function(e){
        $(".dropDown").animate({top : "0px"}, 400);
        $("body").css({"background-color" : "green"})

    })
}

});

logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.

Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.

while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

• javascript
• jquery
• css
• html

1 Answer 1

You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.

Example:

$(document).ready(function(){
     $('.selector').click(function () {
         $('.dropDown').slideToggle(300);
     });
});

updated jsFiddle

Edit

Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.