Fade in and out using javascript

Question

I have a selector that allows me to choose between three types of laptop. However when choosing a brand of laptop, 3 types of that brand must appear as radio buttons. I'm trying to make a javascript fade in/out. So that if i select toshiba, the types of toshiba fade in, and if i select another brand, the current brand displayed fade out and the other fade in. I tried a js fade in/out functionality but i'm not sure how to alter it to fade in/out several elements. Any help please?

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">

</HEAD>

<body>
    <div id="laptop">
        <form>
            <select>
              <option id="handle" value="toshibalap" selected>toshiba</option>
              <option id="handle" value="acerlap">acer</option>
              <option id="handle" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>

        </form>

     </div>

<script>
var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function(){
    slideSource.className = slideSource.className ? '' : 'fade';
}

</script>
</body>


</HTML>

CSS:

div#slideSource {
opacity:1;
transition: opacity 1s; 
}

div#slideSource.fade {
opacity:0;
}

You should probably consider finding a Jquery function for this. It would be a lot easier that trying to write it yourself. — durbnpoisn
– durbnpoisn, Commented Sep 14, 2015 at 20:18

adrield · Accepted Answer · 2015-09-14 20:52:43Z

1

If you do not want to use JQuery, you can use the onChange event to assign a function callback everytime the value is changed. Then, element.style.display = "none" or element.style.display = "block" to show or hide each element.

Here's my JsFiddle. Added an Id to the select tag.

HTML:

<div id="laptop">
<form>
    <select id="select">
        <option id="handle" value="toshibalap" selected>toshiba</option>
        <option id="volvocar" value="acerlap">acer</option>
        <option id="saabcar" value="hplap">hp</option>
    </select> 
    <div id="toshiba">
        <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
        <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
        <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
    </div>
    <div id="acer">
        <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
        <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
        <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
    </div>
    <div id="hp">
        <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
        <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
        <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
    </div>
</form>

JS:

var select = document.getElementById("select");
document.getElementById("toshiba").style.display = "block"; //initialized the selected option as "display = block";

select.addEventListener("change", function(event) {
    if(event.target.value == "toshibalap") {
        document.getElementById("toshiba").style.display = "block";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "acerlap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "block";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "hplap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "block";
    }
});

CSS:

#toshiba {
    display: none;
}

#acer {
    display: none;
}

#hp {
    display: none;
}

edited Sep 14, 2015 at 20:52

answered Sep 14, 2015 at 20:28

adrield

6256 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

adrield Over a year ago

The JsFiddle link? Just checked and it's still up!

mikeb Over a year ago

no it's up however the solution isn't working with me, don't know where did i go wrong.. Can i provide you with a jsfiddle?

adrield Over a year ago

sure! just to check, did you add an id to the select tag? I choose "select" in my fiddle, but can be anything.

AndrewMac · Accepted Answer · 2015-09-14 20:51:04Z

I would agree with the first comment that jQuery would be much easier.

HTML

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</HEAD>

<body>
<div id="laptop">
    <form>
        <select>
          <option id="handle" value="toshibalap" selected>toshiba</option>
          <option id="volvocar" value="acerlap">acer</option>
          <option id="saabcar" value="hplap">hp</option>
        </select> 
            <div id="toshibalap" class="laptops">
                <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
            </div>
            <div id="acerlap" class="laptops">
                <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
            </div>
            <div id="hplap" class="laptops">
                <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
            </div>

    </form>

 </div>

</body>


</HTML>

jQuery

jQuery('select').change(function(){
   var val = jQuery(this).val();
   jQuery('.laptops').not('#'+val).fadeOut();
   jQuery('#'+val).fadeIn();
});

Hope that helps! i did modify your HTML a bit. added a class to the lap top containers and matched the lap top container div ID's to the value of the select box.

sinisake · Accepted Answer · 2015-09-14 21:03:36Z

If you want to keep fade in/fade out, you can do something like this:

Updated HTML:

<div id="laptop">
        <form>
            <select id="sel">
                <option  selected>Select</option>
              <option id="handle" value="toshibalap">toshiba</option>
              <option id="volvocar" value="acerlap">acer</option>
              <option id="saabcar" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <div id="toshiba">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                        </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>
 </div>
        </form>

     </div>

Slightly updated CSS:

#slideSource {
    position:relative;
}

#toshiba, #acer, #hp {
opacity:0;
    position:absolute;

}

#toshiba.fadeout, #acer.fadeout, #hp.fadeout {
opacity:0;
transition: opacity 1s; 
}
#toshiba.fadein, #acer.fadein, #hp.fadein {
    opacity:1;
    transition: opacity 1s;
}

And JS:

document.getElementById('sel').onchange = function(){
var slideSource = document.getElementById('slideSource');  

    target=this.value.replace('lap','');



    divs=slideSource.getElementsByTagName('div');

   for(i=0;i<divs.length;i++) {
       if(divs[i].id!=target) {
          divs[i].className =  'fadeout';

       }
       else {
           divs[i].className =  'fadein';
       }

   }
}

DEMO> http://jsfiddle.net/3qfgyzrz/

Collectives™ on Stack Overflow

Fade in and out using javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related