Jquery sliding form border

Question

I had achieved the sliding form using jquery but when i click on the link, i wish to have a form border like this:

But when i am putting a border for both it is looking like separate borders.

https://drive.google.com/file/d/0By25CEM_KEOiWU42SFhsaTVmZWc/edit?usp=sharing

Here is the code :

http://jsfiddle.net/nikunj2512/MgcDU/8360/

But i am not able to achieve this kind of border effect which surrounds the link & the form.

Please help me.

It sounds like he's asking for a border to surround the `Add` button and the form once he clicks the button - right now there are 2 separate borders. — Blundering Philosopher, Dec 29 '13 at 06:40
O.M.G. Comic sans! I fixed your indents http://jsfiddle.net/n8rq7/ — demux, Dec 29 '13 at 07:00

score 0 · Accepted Answer · edited May 23 '17 at 10:32

First I changed the #add click function of your jQuery script like this: [added css to the u286 id, then remove it later]

$('#add').click(function () {
    if ($('#sliding-form').is(":hidden")) {
        $('#sliding-form').slideDown('slow');
        $('#u286').css({
            'border':'1px solid #000',
            'border-bottom-color':'white'
        });
    } else {
        $('#sliding-form').slideUp('slow');
        $('#u286').removeAttr('style');
    }
});

EDIT: I changed a bit around in your css file. I overlaid the #bottom-header div on top of the #sliding-form div to make sure there is that white gap. Here is what I changed:

Added position: relative; to the .container class,
Added #bottom-header { position: absolute; z-index:10;},
Added background:#fff; to #u286,
Removed .mouseOver {background:#fff;} Since it doesn't affect anything,
Changed top: 30px; to top: 26px; in #sliding-form.

Hopefully this is more to your liking!

updated jsFiddle

Useful StackOverflow question / answer on overlays

Yes it helped but it was not was i am trying to achieve. Did You see in stackoverflow the three tabs `active`, `oldest`, `votes`, how the border coming around them, i want something like this. Please help me out. Thanks — Nikunj Aggarwal, Dec 29 '13 at 14:33
Good call! I edited my post - hopefully this is more like what you were looking for! — Blundering Philosopher, Dec 29 '13 at 18:59

Jquery sliding form border

1 Answers1