How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).

Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.

Here's the example:

http://imageshack.us/f/810/examplebe.jpg/

There will be a submit button in the top section (not in the expand section), 开发者_如何学运维which will submit the options in the drop down menu as well as the options in the section near the submit button.

Thanks!

Set your markup something like this:

<div class="expandingBox" id="expandingBox">
    <div id="expandingBoxContent">
        //Content here
    </div>
</div>
<a href="javascript:void(0)" class="expandButton" id="expandButton">Expand</a>

and in your CSS, the expandingBox class should be set to:

.expandingBox
{
    height: <your initial box height here>
    overflow: hidden;
    // other styling here
}

Then to get it to expand, you can do something like:

$('#expandButton').bind('click', function(){
    var contentHeight = $('#expandingBoxContent').height();
    $('#expandingBox').animate({ height: contentHeight }, 1000);
}

a little demo. it may help you

HTML:

<input id="login_button" type="button" value="&or;" />
<form name-"myForm" id="login_form" style="height:150px">
    <div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
        <label for="name">Name:</label>
        <input type="text" name="name" />
        <label for="password">Password:</label>
        <input type="text" class="password" />
    </div>
    <input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>

JQUERY:

$('#login_button').click(function(e) {
    $('#toggle').slideToggle(1200,
    function() {});
});
$('#submit').click(function() {
    $('form[name=myForm]').submit(function() {
        alert('form submit');
    });
});

$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});

If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.

THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown

It should not be really difficult. You can use jQuery animation effects for that.

Some code example, just to give you direction:

// html

<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>

// js

$(function () {

  $("#some-container-to-show").hide();
  $("#some-container").live("click", function () {
     $("#some-container-to-show").slideDown();   
  });


});