Question

I am building a form where I have some elements that need to appear or disappear when you click another yes/no input. I need some styling help.

See this JS fiddle: http://jsfiddle.net/TdnZp/11/

Everything technically works the way I want. Notice when you click yes/no, another form element shows up or hides, and the space taken by the element disappears. This is good, but I also need the input boxes and labels to be in nice columns, up and down, not staggered like they are now.

Also when the new element comes in, I would like all the elements below it to smoothly slide down to make room instead of jumping down instantaneously, the same for when the elements disappear, the lower ones slide up smoothly to fill in.

Does anyone know how to do these 2 things? If I should be using different HTML elements besides <ul> then please let me know.

Thanks!

Answer 1

You need to use .slideUp and .slideDown animation if you want the new form to slide in.

DEMO

See below,

$('[name="label"]').change(function(){
    if ($('[name="label"]:checked').val() == "yes"){
        $('#bl').slideDown('slow');
    }else{
        $('#bl').slideUp('slow');
    }
});

Edit: You need to modify your markup and css for the alignment and styling. See below code and modify it as you wanted it..

DEMO

CSS:

#list li { padding: 2px; }
#list input { margin: 1px; }
div.form-label { display: inline-block; width: 100px; font-weight: bold;}

HTML:

<form>
    <ul id="list">
        <li>
            <div class="form-label">
                <label for="label">Label:</label>
            </div>
            <input type="radio" name="label" value="yes" />Yes
            <input type="radio" name="label" value="no" />No
        </li>
        <li id="bl">
            <div class="form-label">
                <label for="label_cost">Cost:</label>
            </div>
            <input name="label_cost" />
        </li>
        <li>
            <div class="form-label">
                <label for="another_one">Another One:</label>
            </div>
            <input name="another_one" />
        </li>
    </ul>
</form>