multiple controls like button and text boxes in dropdown list using css

Question

I have two requirements in my project. First, when I click on button, a div should be visible and invisible. I have achieved that using JQuery, as shown in this link.Jsfiddle

Now second requirement is, I'm opening a div in first case, now I have to open same box but as a dropdown list. That means if I click on dropdown Filter, this box given in link should open, and it should overlay if something under it, like in my case I have grid. So dropdown should overlay this grid but not replace it. I have googled it but didn't find any appropriate solution. I just need that control which will do the magic. Not whole code.

if any clarification needed. please comment. thanks.

Answer 1

Commented out the code which I have added. See the fiddle. First you need to set position: absolute then add the JS to position the dropdown below the button.

JS

    $(document).ready(function ()
    {

        $('#btn').live('click', function (event)
        {

            $('#div1').toggle('show');

        });
        // added the following script
        var offH = $('#btn').outerHeight();
        var offT = $('#btn').offset().top + offH;
        var offL = $('#btn').offset().left;
        $('#div1').css('top', offT+"px").css('left', offL+"px");
    });

CSS

   #div1{
       display:none;
       position: absolute;     /* ADDED THIS LINE */
   }