Question

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!

Answer 1

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);
}