CODEWITHSUNDEEP
javascriptjquerycssformsslidedown
user2874401
user2874401

Reputation: 11

Use a Slide Down in jquery to display hidden form fields

I am having trouble applying the slidedown effect from jquery to display hidden div of form fields. I am trying to display each set of form fields if a specific value is selected from the select dropdown.

Script:

$(document).ready(function(){
       $("#role").change(function(){
        if ($("#role").val() == "student" ){ 
            $(".hide1").slideDown("fast"); //Slide Down Effect
        } else {
            $(".hide1").slideUp("fast");    //Slide Up Effect
        }
        if ($("#role").val() == "faculty" ) {
            $(".hide2").slideDown("fast"); //Slide Down Effect
        } else {
            $(".hide2").slideUp("fast");    //Slide Up Effect 
        }
         if ($("#role").val() == "alumni" ) {
            $(".hide3").slideDown("fast"); //Slide Down Effect 
        } else {
             $(".hide3").slideUp("fast");    //Slide Up Effect
        }});
});

HTML:

<form id="myform" class="form-control">
  <select name = "role" class = "btn btn-primary" id ="role">:
    <option>Role</option>
    <option value = "student"> Student </option>
    <option value = "faculty"> Faculty/Staff </option>
    <option value = "alumni"> Alumni </option>
  </select>
  <br/><br/><br/><br/><br/><br/>
  <div class="hide" id ="hide1">
    <label for="address">Campus Address:</label>
    <input type="text" id = "campadd" name="campadd" class= "form-control"/>
    <label for="Major">Major:</label>
    <input type="text" id = "major" name="major" class= "form-control"/>
  </div>
  <div class="hide" id = "hide2">
    <label for="department">Department:</label>
    <input type="text" id = "dept" name="dept" class= "form-control"/>
    <label for="location">Location:</label>
    <input type="text" id = "locations" name="location" class= "form-control"/>
  </div>
  <div class="hide" id ="hide3">
    <label for="graduationdate">Graduation Year:</label>
    <input type="text" id = "gradyear" name="gradyear" class= "form-control"/>
    <label for="Major">Degree:</label>
    <input type="text" id = "degree" name="degree" class= "form-control"/>
  </div>
  <br/>
</form>

Upvotes: 1

Views: 2037

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

You are using class selector instead of id selector in the slide up/down command

$(".hide2").slideDown("fast");

instead of

$("#hide2").slideDown("fast");

it can be shorten as

$(document).ready(function () {

    var map = {
        student : '#hide1',
        faculty : '#hide2',
        alumni : '#hide3',
    }
    $("#role").change(function () {
        var target = $(map[this.value]);
        $('.hide').not(target).stop(true, true).slideUp("fast");
        target.stop(true, true).slideDown("fast");
    });
});

Demo: Fiddle

Another way to look at this is: Fiddle

Upvotes: 4

Related Questions