Question

I have a question how to set this up.
Here is the example: http://jsfiddle.net/VBS4E/25/

What’s a good way to move the input field right below the button? Like this:

 ________   __________   __________
|  Btn#1 |  |  Btn#2 |  |   Btn#3  |
 ________    _________   __________

When click on Btn#2,

 ________   __________   __________
|  Btn#1 |  |  Btn#2 |  |   Btn#3  |
 ________    _________   __________
                 _____________
         Label: |_____________|

Answer 1

You can get the position of the button and then use CSS to absolutely position the field below it. I added 20 to the top so it’d be 20px below the button.

$(function(){
    $('div#Adv').hide();    
    $('.toggle-link').click(function(e){
        var pos = $(this).position();
        e.preventDefault();
        $('#Adv').css({
            position: "absolute",
            top: pos.top + 20 + "px",
            left: pos.left + "px"}).toggle('show');
    });
});

DEMO