Expanding and collapsing multiple DIV elements depending on selected

Question

I need some help with JavaScript. This needs to be changed.

My HTML has a dropddown list with a default selection of "choose one"

• New User
• Previous User
• Existing User

I have 4 div in my html id new / previous / existing and existinginfo

the page starts with all div 's closed but I would like to alter the code to amend them to show depending on what drop down list is picked.

If the selection drop down list is New user only "NEW" div is shown others are closed.

Previous user - NEW and PREVIOUS div 's are shown others are closed.

existing user existing div is shown and existinginfo div is shown (new and previous are closed).

I believe i need to have a additional functions which are copies of my slideuprunnew/slidedownRunnew functions with the addtional names (ie slideuprunPrev and SlideDownRunPrev) but I am having a lot of problems working out how to do the Slide() function and correctly nesting all the if.

<script type="text/javascript">
 var sliderIntervalId = 0;
 var sliderHeight = 1;
 var sliding = false;
 var slideSpeed = 5;

 function Slide() {
     var selected = document.getElementById('selection');
     if (sliding)
         return;
     sliding = true;

     if (sliderHeight == 150 && selected.value != "new user")
         sliderIntervalId = setInterval('SlideUpRunNEW()', 30);
     else {

         if (selected.value == "new user")
             sliderIntervalId = setInterval('SlideDownRunNEW()', 30);

         else {
             sliding = false;
             return;
         }
     }
 }


 function SlideUpRunNEW() {
     slider = document.getElementById('new');
     if (sliderHeight <= 1) {
         sliding = false;
         sliderHeight = 1;
         slider.style.height = '1px';
         clearInterval(sliderIntervalId);
     }
     else {
         sliderHeight -= slideSpeed;
         if (sliderHeight < 1)
             sliderHeight = 1;
         slider.style.height = sliderHeight + 'px';
     }
 }

 function SlideDownRunNEW() {
     slider = document.getElementById('new');
     if (sliderHeight >= 150) {
         sliding = false;
         sliderHeight = 150;
         slider.style.height = '150px';
         clearInterval(sliderIntervalId);
     }
     else {
         sliderHeight += slideSpeed;
         if (sliderHeight > 150)
             sliderHeight = 150;
         slider.style.height = sliderHeight + 'px';
     }
 }

</script>

Answer 1

have a look here: http://jsfiddle.net/uZcTH/

I used JQuery, if you need only pure javascript, then these are not the droids you are looking for.

JS

 $("#newUser").show();
 $("#previousUser").hide();
 $("#existingUser").hide();

 $("#userPicker").change(function () {
     var val = $(this).val();
     switch (val) {
         case "1":
             $("#newUser").show();
             $("#previousUser").hide();
             $("#existingUser").hide();
             break;
         case "2":
             $("#newUser").hide();
             $("#previousUser").show();
             $("#existingUser").hide();
             break;
         case "3":
             $("#newUser").hide();
             $("#previousUser").hide();
             $("#existingUser").show();
             break;
     }
 });

HTML

<select id="userPicker">
    <option value="1">New User</option>
    <option value="2">Previous User</option>
    <option value="3">Existing User</option>
</select>
<div id="newUser">new user</div>
<div id="previousUser">previous user</div>
<div id="existingUser">existing user</div>

hope it helps, regards

---

EDIT

pure js version here: http://jsfiddle.net/uZcTH/2/

CODE

document.getElementById("newUser").style.display = "none";
document.getElementById("previousUser").style.display = "none";
document.getElementById("existingUser").style.display = "none";

document.getElementById("userPicker").onchange = function () {
    switch (this.selectedIndex) {
        case 0:
            document.getElementById("newUser").style.display = "block";
            document.getElementById("previousUser").style.display = "none";
            document.getElementById("existingUser").style.display = "none";
            break;
        case 1:
            document.getElementById("newUser").style.display = "none";
            document.getElementById("previousUser").style.display = "block";
            document.getElementById("existingUser").style.display = "none";
            break;
        case 2:
            document.getElementById("newUser").style.display = "none";
            document.getElementById("previousUser").style.display = "none";
            document.getElementById("existingUser").style.display = "block";
            break;
    }
}