CODEWITHSUNDEEP
jqueryhtmlcss
klark
klark

Reputation: 494

SlideDown multiple elements at once

I have a div for a form

<div class="form" style="display:none">

inside this div, I have several divs

Example 

<div class="row">
    <?php echo $form->labelEx($model,'comment'); ?>
    <?php echo $form->textField($model,'comment',array('size'=>60,'maxlength'=>140)); ?>
    <?php echo $form->error($model,'comment'); ?>
</div>

I'd like to slidedown all the div smoothly.

I simply tried

$(".form").slideDown(2000);

it slidedown div by div which give a very ugly effect. How to slidedown as it was a single div ?

the complete form is the following 

<p>
    <div class="form" style="">
        <form id="comment-form" method="post" action="/post/index.php/comment/create>
            <p class="note">
            Fields with
                <span class="required">*</span>
                are required.
            </p>
            <div id="comment-form_es_" class="errorSummary" style="display:none">
                <p>Please fix the following input errors:</p>
                <ul>
            </div>
            <div class="row">
                <label class="required" for="comment_comment">
                Comment
                <span class="required">*</span>
                </label>
                <input id="comment_comment" type="text" name="comment[comment]" maxlength="140" size="60">
                <div id="comment_comment_em_" class="errorMessage" style="display:none"></div>
            </div>
            <div class="row">
                <label class="required" for="comment_type_id">
                    Type
                    <span class="required">*</span>
                </label>
                <input id="comment_type_id" type="text" name="comment[type_id]">
                <div id="comment_type_id_em_" class="errorMessage" style="display:none"></div>
            </div>
            <div class="row buttons">
                <p>
                <input type="submit" value="Create" name="yt0">
            </div>
        </form>
    </div>
</p>
</div>

Thank you for your help

Upvotes: 0

Views: 358

Answers (1)

Joshua
Joshua

Reputation: 3603

Wrap them all with a single DIV, then slide that parent DIV down.

If you are already doing that, then it is likely that there are other divs with class="form" on them - probably being generated by the tags. Change the parent div to a unique class name or ID and slideDown that instead.

Upvotes: 3

Related Questions