CODEWITHSUNDEEP
jquery
brandozz
brandozz

Reputation: 1119

jQuery - show/hide multiple divs with the same id

I recently found an answer to one of my questions here on stackoverflow which involved showing and hiding a div based on the value of a dropdown, here is the demo - http://jsfiddle.net/pXdS6/16/

My new question is, what if I wanted to show multiple divs with the same id based on the value

html like this:

<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>
<div id="divarea3" class="box">DIV Area 3</div>

If I select "DIV Area 3" from the dropdown I want both divs with #divarea3 to display

Upvotes: 0

Views: 4789

Answers (2)

Khanal
Khanal

Reputation: 788

You cannot and should not have multiple DOM elements with the same id. Use classes. Use hundreds of classes (not really) if you have to, to group them. Once you have the classes working,

<div id="divarea1" class="box set1">DIV Area 1</div>
<div id="divarea2" class="box set1">DIV Area 2</div>
<div id="divarea3" class="box set2">DIV Area 3</div>
<div id="divarea4" class="box set2">DIV Area 3</div>

$('.set2').show();

This should do what you wanted to achieve.

Upvotes: 2

NuNn DaDdY
NuNn DaDdY

Reputation: 3002

ID attributes should be unique on a page. If you're interested in displaying the "divarea3" items, you could add another class to each of the elements and then show them based on that class.

Upvotes: 1

Related Questions