CODEWITHSUNDEEP
jquery
vaggelis
vaggelis

Reputation: 70

show/hide multiple group of divs with jquery

following this example i made a test php file with the code like the example

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>




  jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
});

the example works perfect but in case where more than one divs have the id for example "id='div1'", the rest of the divs wont be shown

for example 

 <div class="buttons">
 <a  id="showall">All</a>
 <a  class="showSingle" target="1">Div 1</a>
 <a  class="showSingle" target="2">Div 2</a>
 <a  class="showSingle" target="3">Div 3</a>
 <a  class="showSingle" target="4">Div 4</a>
 </div>

 <div id="div1" class="targetDiv">Lorum Ipsum1</div>
 <div id="div1" class="targetDiv">Some content</div>
  <div id="div1" class="targetDiv">Some content 1</div>
 <div id="div2" class="targetDiv">Lorum Ipsum2</div>
 <div id="div2" class="targetDiv">Different content 1</div>
 <div id="div2" class="targetDiv">different content 2</div>
 <div id="div3" class="targetDiv">Lorum Ipsum3</div>
 <div id="div4" class="targetDiv">Lorum Ipsum4</div>

when i click a button with the target=1 only the first div with the id="div1" will be shown and the rest are hide i want all the divs with id="div1" to be shown

i have seen some examples but i cant understand what am i missing

thanks in advance

vaggelis

Upvotes: 1

Views: 385

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

The HTML in your second example is invalid as you cannot have multiple elements with the same id. To fix this issue, use class attributes to group the target div elements.

Also note that adding your own custom attributes to elements is invalid, and can cause issues with HTML rendering and JS. Instead, use data-* attributes to store custom data with an element. Try this:

jQuery(function($) {
  $('#showall').click(function() {
    $('.targetDiv').show();
  });
  
  $('.showSingle').click(function() {
    $('.targetDiv').hide();
    $('.div' + $(this).data('target')).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" data-target="1">Div 1</a>
  <a class="showSingle" data-target="2">Div 2</a>
  <a class="showSingle" data-target="3">Div 3</a>
  <a class="showSingle" data-target="4">Div 4</a>
</div>

<div class="div1 targetDiv">Lorum Ipsum1</div>
<div class="div1 targetDiv">Some content</div>
<div class="div1 targetDiv">Some content 1</div>
<div class="div2 targetDiv">Lorum Ipsum2</div>
<div class="div2 targetDiv">Different content 1</div>
<div class="div2 targetDiv">different content 2</div>
<div class="div3 targetDiv">Lorum Ipsum3</div>
<div class="div4 targetDiv">Lorum Ipsum4</div>

Upvotes: 0

rupps
rupps

Reputation: 9907

ID's have to be unique, by definition.

If you need to subgroup your items you can use several classes:

<div id="div1" class="targetDiv group1">Lorum Ipsum1</div>
<div id="div2" class="targetDiv group1">Some content</div>
<div id="div3" class="targetDiv group1">Some content 1</div>
<div id="div4" class="targetDiv group2">Lorum Ipsum2</div>
<div id="div5" class="targetDiv group2">Different content 1</div>
<div id="div6" class="targetDiv group2">different content 2</div>
<div id="div7" class="targetDiv group3">Lorum Ipsum3</div>
<div id="div8" class="targetDiv group3">Lorum Ipsum4</div>

then

$(".targetDiv.group1").hide();
$(".targetDiv.group2").hide();
$(".targetDiv.group3").hide();

Upvotes: 1

Related Questions