CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 37

Show and Hide mulitple input boxes from select input

I have a form with many questions for the enduser. On a certain point in the form there is a question that has 3 alternative ways to continue the form. If option 1 is selected (for example) then DIV 1 shows.

If option 2 is selected then DIV 2 shows. I have this working. Only when a enduser makes (for example) a mistake and chooces option 1, and next option 2 to correct, DIV 1 + 2 are showed both.

What I try to achieve is when a enduser chooce option 1, and makes a mistake and chooce option 2, only the newly choosen option is showed. 

$(function() {

        $('#my_select').change(function() {
            $('.DIV_1').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
		
		$('#my_select').change(function() {
            $('.DIV_2').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
	
    });

Upvotes: 0

Views: 39

Answers (1)

Saransh Kataria
Saransh Kataria

Reputation: 1497

You need to hide the other div when one div is shown. Following should do it:

$(function() {

        $('#my_select').change(function() {
            $('.DIV_1').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
            $('.DIV_2').hide();
        });

        $('#my_select').change(function() {
            $('.DIV_2').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
            $('.DIV_1').hide();
        });

    });

Upvotes: 1

Related Questions