CODEWITHSUNDEEP
javascriptjqueryhtmlcssselect
The Wro
The Wro

Reputation: 13

jQuery: Hide/Show multiple divs on select change

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.

Upvotes: 0

Views: 2837

Answers (4)

Candy Gumdrop
Candy Gumdrop

Reputation: 2785

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.

Upvotes: 2

yashpal bharadwaj
yashpal bharadwaj

Reputation: 323

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.

Upvotes: 0

Riddell
Riddell

Reputation: 1489

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.

Upvotes: 0

Aravind M J
Aravind M J

Reputation: 73

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

Upvotes: 0

Related Questions