CODEWITHSUNDEEP
javascriptjqueryhtml
RonTheOld
RonTheOld

Reputation: 777

Hidding elements and showing elements

Hi guys I have a very simple timetable laid out. I want to be able to hid certain elements and show certain elements depending on what the user clicks.

Fiddle : Link

However you can see that its all working fine apart from i cant get all the elements to show because i am using the save id twice. So when the user clicks on beginner , it should show all the beginner classes on the timetable but it only shows the first div and not the second div because i have used the id twice , i was wondering if there is a way around this?

HTML:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a id="showall">All</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="1">Beginners</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="2">Intermediate/Advanced</a>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <a class="showSingle" target="3">Kids</a>
    </div>
</div>
<div class="container">
    <h1>Monday</h1><span class="border"></span>
    <p style=" font-size: 17px;"></p>
    <div class="targetDiv" id="div1">
        <b>07:15 - 08:15</b>     Submission Wrestling<br>
        <b>11:00 - 12:00</b>     Circuits<br>
        <b>12:00 - 13:00</b>     BJJ Class<br>
    </div>
    <div class="targetDiv" id="div2">
        <b>13:00 - 14:00</b>     BJJ Sparring<br>
    </div>
    <div class="targetDiv" id="div3">
        <b>16:00 - 16:45</b>     Mat Monkeys (ages 4-7)<br>
        <b>16:45 - 17:45</b>     Juniors (ages 8-11)<br>
    </div>
    <div class="targetDiv" id="div1">
        <b>18:00 - 19:00</b>     BJJ Class<br>
        <b>18:30 - 19:30</b>     BJJ Fundamentals<br>
    </div>
    <div class="targetDiv" id="div2">
        <b>19:00 - 20:00</b>     BJJ Sparring
        <p></p>
    </div>
</div>

jquery 

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

Upvotes: 0

Views: 35

Answers (1)

Omi
Omi

Reputation: 4007

Instead of #div1,2,3 use class .div1,2,3

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('.div' + $(this).attr('target')).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <a id="showall">All</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="showSingle" target="1">Beginners</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="showSingle" target="2">Intermediate/Advanced</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="showSingle" target="3">Kids</a>
  </div>

</div>



<div class="container">
  <h1>Monday</h1><span class="border"></span>
  <p style=" font-size: 17px;">
    <div class="targetDiv div1">
      <b>07:15 - 08:15</b>     Submission Wrestling<br>
      <b>11:00 - 12:00</b>     Circuits<br>
      <b>12:00 - 13:00</b>     BJJ Class<br>
    </div>
    <div class="targetDiv div2">
      <b>13:00 - 14:00</b>     BJJ Sparring<br>
    </div>
    <div class="targetDiv div3">
      <b>16:00 - 16:45</b>     Mat Monkeys (ages 4-7)<br>
      <b>16:45 - 17:45</b>     Juniors (ages 8-11)<br>
    </div>
    <div class="targetDiv div1">
      <b>18:00 - 19:00</b>     BJJ Class<br>
      <b>18:30 - 19:30</b>     BJJ Fundamentals<br>
    </div>
    <div " class="targetDiv div2 ">
			<b>19:00 - 20:00</b>     BJJ Sparring</p>
		</div>
		
		</div>

Upvotes: 1

Related Questions