form with slide up and downStuck need helping

Discussion in 'jQuery' started by chiller4life, Mar 25, 2013.

  1. #1
    i have a question form the questions are with radio buttons and when someone clicks ona radio button a new question slides up. but when i do it it keeps sliding about 4 times and it showing some of the divs which are meant to be hidden behind each other
    help will be highly appreiciated.

    <----i m using drupal webform ---->

    <div class='question'><?php print drupal_render($form['submitted']['question1']); ?></div>
    <div class='question'><?php print drupal_render($form['submitted']['question2']); ?></div>
    <div class='question'><?php print drupal_render($form['submitted']['question3']); ?></div>

    <----------HTML--------->

    <div class="question">
    <div id="webform-component-what-type-of-company-are-you" class="form-item webform-component webform-component-radios">
    <label for="edit-submitted-what-type-of-company-are-you">
    What type of company are you?
    <span class="form-required" title="This field is required.">*</span>
    </label>
    <div id="edit-submitted-what-type-of-company-are-you" class="form-radios webform">
    <div class="form-item form-type-radio form-item-submitted-what-type-of-company-are-you">
    <input id="edit-submitted-what-type-of-company-are-you-1" class="webform form-radio" type="radio" value="key1" name="submitted[what_type_of_company_are_you]">
    <label class="option" for="edit-submitted-what-type-of-company-are-you-1">Limited company </label>
    </div>
    <div class="form-item form-type-radio form-item-submitted-what-type-of-company-are-you">
    <input id="edit-submitted-what-type-of-company-are-you-2" class="webform form-radio" type="radio" value="key2" name="submitted[what_type_of_company_are_you]">
    <label class="option" for="edit-submitted-what-type-of-company-are-you-2">Partnership </label>
    </div>
    <div class="form-item form-type-radio form-item-submitted-what-type-of-company-are-you">
    <input id="edit-submitted-what-type-of-company-are-you-3" class="webform form-radio" type="radio" value="key3" name="submitted[what_type_of_company_are_you]">
    <label class="option" for="edit-submitted-what-type-of-company-are-you-3">Sole trader </label>
    </div>
    <div class="form-item form-type-radio form-item-submitted-what-type-of-company-are-you">
    <input id="edit-submitted-what-type-of-company-are-you-4" class="webform form-radio" type="radio" value="key4" name="submitted[what_type_of_company_are_you]">
    <label class="option" for="edit-submitted-what-type-of-company-are-you-4">Awaiting company registration </label>
    </div>
    </div>
    </div>
    </div>


    jquery Code

    $('document').ready(function () {
    $(".question").not(".question:first").hide();

    $('.form-item').click(function () {
    $('.question:visible').slideUp().next().slideDown()
    });

    $('.prevbutton').click(function () {
    $('.question:visible').slideUp().prev().slideDown()
    });
    });

    $(document).ready(function () {
    $(".question1").click(function () {
    $(".nextbutton").show(100);
    });

    });

    $(document).ready(function () {
    $(".question2").click(function () {
    $(".nextbutton1").show(100);
    });

    });

    THANK YOU
     
    chiller4life, Mar 25, 2013 IP