jQuery: Hide/Show multiple divs on select change

Question

In my form I need to show/hide multiple divs depending on which OPTION in a SELECT was chosen.

I can get in running but my problem is, that one div can get hidden/shown by many OPTIONS. So with my code these divs show/hide for a certain time and hide/show again then.

Here is my HTML:

<select id="vFormat" name="vFormat" onchange="getval(this);">
    <option value="0">Choose</option>
    <option value="1" class="format1">Option 1</option>
    <option value="2" class="format2">Option 2</option>
    <option value="3" class="format3">Option 2</option>
    <option value="4" class="format4">Option 2</option>
    <option value="5" class="format5">Option 2</option>
</select>

<div class="showdivformat1 showdivformat2 hiddenelement">
   Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement">
   Text of visible Div
</div>

Here is my jQuery

function getval(sel) {

    var divval = $('.selectInput option:selected').attr('class').split(' ');

    for(var i=0; i<divval.length; i++){
        $(".hiddenelement").hide("50");
        $(".showdiv" + divval[i]).show("50");
    }

    for(var i=0; i<divval.length; i++){
        $(".visibleelement").show("50");
        $(".hidediv" + divval[i]).hide("50");
    }       
}

I know the problem is, that I always hide the .hiddenelement and show the .visibleelement when changing the option.

But I don`t have a solution to check if a div is already hidden oder visible and should stay like this after the option change.

It's not really clear what the problem is. For any given selected option, can you identify which elements should be shown? Why can't you show those elements? — David, Apr 29 '16 at 14:50
here a pure javascript solution (no jquery needed): http://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript — Richard Barker, Apr 29 '16 at 14:52
There are plenty of other questions on stack overflow with a similar title to what you entered. I would suggest that you change the title and better phrase the question. — CaptainBli, Apr 29 '16 at 14:58

score 2 · Answer 1 · answered Apr 29 '16 at 15:14

Here's a nice clean approach to what you're doing:

HTML:

<select id="vFormat" name="vFormat">
    <option value="0">Choose</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<div class="select-default-hidden select-3-shown select-4-shown">
   Shown with options 3 and 4
</div>

<div class="select-default-shown select-4-hidden">
   Shown always, except with option 4
</div>

JavaScript:

$('#vFormat').change(function() {
    $('.select-default-hidden').hide();
    $('.select-default-shown').show();

    $('.select-' + $(this).val() + '-shown').show();
    $('.select-' + $(this).val() + '-hidden').hide();
}).change();

Here it is on JSFiddle: https://jsfiddle.net/kd0Lxrgc/1/

Add more elements with select-default-hidden and select-default-shown for if they should be hidden by default or shown by default, and add select-X-shown and select-X-hidden to show or hide each element with a given selected option.

score 0 · Answer 2 · answered Apr 29 '16 at 14:58

0

Your Problem is not clear but a possible solution can be obtained by adding and removing class for hide and show the div.

answered Apr 29 '16 at 14:58

Aravind M J

73
13

score 0 · Answer 3 · answered Apr 29 '16 at 15:04

Just setup up arrays of jQuery Objects. Then when the user changes the selected option just have a case and then loop the array of the jQuery objects you want to hide and simply hide them.

//// Psuedo Code...

var elemGroupOne = [], elemGroupTwo = [];

// push divs to the arrays 
elemGroupOne.push(/* jQuery Object... */);

$("#vFormat").on("change", function(event) {
   var selectedValue = $(this).val();

   switch (selectedValue) {
       case "Option 1":
            // Hide group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).show();  
            }
           break;

       case "Option 2":
            // Hide group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).show();  
            }
           break;
   } 
});

You could easily make this better than the pseudo code i produced but I hope this helps to answer your question if I understood your question right.

score 0 · Answer 4 · answered Apr 29 '16 at 15:05

you may try this:

<div class="showdivformat1 showdivformat2 hiddenelement" id="div1">
  Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement" id="div2">
  Text of visible Div
</div>


function getval() {

    var divs = document.getElementsByTagName("div");

for(var i=0; i<divs.length; i++){
    $("#div"+i).hide("50");
    $("#div"+i+1).show("50");//any other way to identify ur identity of div and u are done
}

for(var i=0; i<divval.length; i++){
    $(".visibleelement").show("50");
    $(".hidediv" + divval[i]).hide("50");
}       
}

Let me know if it is solved.

jQuery: Hide/Show multiple divs on select change

4 Answers4

HTML:

JavaScript: