Is there a javascript solution to toggling multiple rows?

[jonsan32]

I had a jquery-based code that messed up the slider on my page @ http://formidablehoops.blogspot.com

Is there a way to have those two co-exist, or is there a way to toggle my calendar at the bottom with javascript instead? I've removed the code for now, but I think it's a bit much to view for potential customers.
I would love it if I could have 5 different buttons running horizontally at the top, colored and named for the 5 different types of events I'd like to toggle. So someone could come to my site, see the calendar, press CAMPS, then they'd see all the CAMPS for that year only.

Can anyone help?

<style type="text/css">



.jamactive {  
 width: auto;
 padding: 6px 11px;
 background: #0066CC;
 border: solid 1px #000099;
  font: 12px/100% Tahoma;
font-weight: 500;
letter-spacing:2px;
 color: #ffffff;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jaminactive {  width: auto;
 padding: 6px 10px;
 background: #666666;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #cccccc;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}

.jaminactive:hover
{ 
color: #ffffff;
}


.jamactive:hover
{ 
background-color: #000099;
 border: solid 1px #000066;}

.jamdate {  width: auto;
position: relative;
 padding: 3px 4px;
 background: #FFFFCC;
 border: solid 1px #888;
  font: 11px/100% Tahoma;
font-weight: 500;
 color: #222222;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.leagueback {  width: auto;
 padding: 3px 4px;
 background: #990000;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.tournyback {  width: auto;
 padding: 3px 4px;
 background: #000055;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}


.teamback {  width: auto;
 padding: 3px 4px;
 background: #666666;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}




.campback {  width: auto;
 padding: 3px 4px;
 background: #333333;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}



.clinicback {  width: auto;
 padding: 3px 4px;
 background: #000000;
letter-spacing:1px;
 border: solid 1px #000000;
  font: 12px/100% Tahoma;
font-weight: 500;
 color: #ffffff;
text-transform:uppercase;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
-webkit-appearance: none;
 cursor: pointer;}









</style>



<script type="text/javascript" defer=defer> 

// Andrew Urquhart : CountDown Timer : http://andrewu.co.uk/clj/countdown/
function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("if(typeof CD_T=='function'){CD_T('"+id+"',"+e+")}",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);if(CD_OBJS[id]){CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"}};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"http://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init};
    </script>
<center>
<table style="background:black; padding:0px; text-align:center; border: 0px black solid; font-weight:bold; color:#ffffff; padding:5px;" width=930px><tr><td>

<b>FIRST INAUGURAL CAMP: <font size=3 color="#fff000"><span id="countdown1">2013-4-19 09:00:00 GMT-06:00</span></font> remaining for the Early Registration Discount</b>

</td></tr></table>
</center>











<center>

<table width=930 style="border-left:3px solid black; border-right:3px solid black; border-top:3px solid black; background-color:#eeeeee;" cellspacing=0 cellpadding=0><tr><td>




<div align="left">
<table width=100%>


<tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">1/11/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr>



<tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">1/18/14 - 1/19/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>




<tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">2/1/14 - 2/2/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="campback">Camp at this location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>



<tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">2/8/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="clinicback">Clinic @ This Location (at these hours)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jamactive">Registration</span></a></td></tr></table>
</td></tr>



<tr onmouseover="this.bgColor='#fff777';" onmouseout="this.bgColor='white';" height=40><td style="border-bottom:3px solid black;">
<table width=100% cellpadding=0><tr><td width=20%><span class="jamdate">3/8/14 - 3/9/14</span></td><td style="border-left: 1px solid #000000; padding: 5px; font-weight:bold;" width=65%><span class="tournyback">Tournament at this location (for these ages)</span></td><td style="border-left: 1px solid #000000; padding: 5px;" width=15%><a href="javascript:void()" target="_blank" style="text-decoration: none;"><span class="jaminactive">Registration TBA</span></a></td></tr></table>
</td></tr>




</table></div>


</td></tr></table></center>

[jonsan32]

Something like this is exactly what I mean, but the opposite of what I'd like. Right now, I have 3 toggles that hide each row that's classed accordingly, but I'd like for that click to SHOW just that one class instead. So I suppose I would need the first click of any header to set the others to off. The from then on, for each to toggle accordingly. When 1 is pressed the first time, it should hide 2 and 3. Then if 1 is pressed again, it just hides 1 while the rest stay hidden. I'll understand if that's impossible, btw. Could I toggle multiple divs with just one click? That could work, then I would just need a show all button to accompany it.

So close!!! :-)

<script type="text/javascript">
var spans, trs, trslen;
function setToggles() {
  as = document.getElementsByTagName('a');
  trs = document.getElementsByTagName('tr');
  trslen = trs.length;
  for (var i = 0, j = as.length; i < j; i++) {
    if (as[i].rel) {
      as[i].onclick = toggle;
    }
  }
}
function toggle() {
  var rel = this.rel;
  for (var k = 0; k < trslen; k++) {
    if (trs[k].className === rel) {
      trs[k].style.display = trs[k].style.display == 'none' ? '' : 'none';
    }
  }
}
</script>
<style type="text/css">


.jog {
background-color:#fff666;
font-weight:bold;
}
.walk {
background-color:#66ff66;
font-weight:bold;
}
.run {
background-color:#ff6666;
font-weight:bold;
}

</style>



<table width="450" border="1" cellspacing="0" cellpadding="8">
<tr><td width="150" align="center"><a href="#" rel="run" style="background-color:#ff6666; color:black; text-transform:uppercase; font-size:11px; font-weight: bold; border: 1px solid black; padding:3px; text-decoration:none;">toggle run</a></td>
<td width="150" align="center"><a href="#" rel="walk" style="background-color:#66ff66; color:black; text-transform:uppercase; font-size:11px; font-weight: bold; border: 1px solid black; padding:3px; text-decoration:none;">toggle walk</a></td>
<td width="150" align="center"><a href="#" rel="jog" style="background-color:#fff666; color:black; text-transform:uppercase; font-size:11px; font-weight: bold; border: 1px solid black; padding:3px; text-decoration:none;">toggle jog</a></td></tr>
<tr class="run">
<td>Run main</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr class="walk">
<td>walking </td>
<td>a</td>
<td>b</td>
</tr>
<tr class="jog">
<td>jog version 3</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="jog">
<td>jogmain</td>
<td>e</td>
<td>f</td>
</tr>
<tr class="walk">
<td>Walk version2</td>
<td>g</td>
<td>h</td>
</tr>
<tr class="run">
<td>runversion3</td>
<td>i</td>
<td>j</td>
</tr>
</table>

<script type="text/javascript">
setToggles();
</script>

[jonsan32]

This is what I want http://jsfiddle.net/PbZRF/27/ , but I don't really understand how to install it. I know it uses jqueyr, but I read somehow that you could add "noconflict" or something to block it from my other jquerys.

[jonsan32]

OK, I did it. I just changed the slider on page's jquery to the more updated jquery that I was trying to use for the calendar. DID NOT know you could do that!

As for the calendar, I'm going with the code below that toggles it exactly how I want. Cheers.

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>




<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.brand').on('change',function() {

        $checked = $('.brand:checked'); //perform selection only once

        if ($checked.length){ //checks if there are checked elements at all
           $('.merk').hide(); //hide all
           $checked.each(function(){
               $('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
           });
        } else { //no checked elements
           $('.merk').show(); //show all
        }

    });
});//]]>  

</script>


</head>
<body>
  <input type="checkbox" class="brand" id="Gazelle" />
<input type="checkbox" class="brand" id="Batavus" />
<input type="checkbox" class="brand" id="Trek" />
<input type="checkbox" class="brand" id="KogaMiyata" />


<li class="merk" id="m_Gazelle" style="display:block;">
Gazelle
</li>

<li class="merk" id="m_Batavus" style="display:block;">
Batavus
</li>

<li class="merk" id="m_Trek" style="display:block;">
Trek
</li>

<li class="merk" id="m_KogaMiyata" style="display:block;">
KogaMiyata
</li>