CODEWITHSUNDEEP
javascriptjquery
bulldog5046
bulldog5046

Reputation: 195

Javascript show/hide multiple DIV's

I'm in need of a bit of help. I have a current script that switches div's between being visible and hidden depending on a dropdown selector, it works as it was originally designed absolutely fine.

The problem i have is that i need to modify it to change more than 1 div on the page. Currently i'm using the same ID for the div's but only the first item on the page is updated. Reading over the JS this makes sense, but i can't figure out how to modify it to get the desired result?

Javascript:

var lastDiv = "";
var lastProd = "";
function showDiv(divName, productID) {
    if (productID == lastProd) {
        $("#"+lastDiv).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    } 
    else {
        $(".visible-div-"+productID).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    }
    lastProd = productID;
    lastDiv = divName;
}

The selector:

<select onchange="showDiv('pxo_'+this.value,2);" name="pre_xo_id">
<option value="3">Blue - £120.00</option>
<option value="4">Red - £120.00</option>
<option value="5">Yellow - £120.00</option>

The DIV's:

<div id="pxo_3" class="visible-div-2" style="display: none;">RED</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">BLUE</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: block;">YELLOW</div>

<div id="pxo_3" class="visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: none;">0 In Stock</div>

Upvotes: 1

Views: 774

Answers (4)

bulldog5046
bulldog5046

Reputation: 195

Thank you for the help all, I have modified the JS to look for both ID and Class as i am unable to change part of the code due to it being protected by ioncube.

This seems to have the desired result:

var lastDiv = "";
var lastProd = ""; 
function showDiv(divName, productID) {
    if (productID == lastProd) {
        $("#"+lastDiv).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
        $("."+lastDiv).hide();
        $("."+divName).fadeIn(".visible-div-"+productID);
    } else {
        $(".visible-div-"+productID).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
        $(".visible-div-"+productID).hide();
        $("."+divName).fadeIn(".visible-div-"+productID);
    }
    lastProd = productID;
    lastDiv = divName;
}

Upvotes: 0

Scott Bartell
Scott Bartell

Reputation: 2840

IDs are supposed to be used for only a single element on the page. You want to use css selectors.

Upvotes: 0

nix
nix

Reputation: 3302

id's must be unique, that's why only the first item is being update. You may put those values to class instead to allow multiple selection.

Upvotes: 4

PSR
PSR

Reputation: 40358

First you can not use one id for morethan one element.They must be unique.Apply same css class to those elements. We can use same class instead to allow multiple selection.

Upvotes: 0

Related Questions