Is there a javascript solution to toggling multiple rows?

Question

jonsan32 12 Junior Poster in Training

13 Years Ago

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>

javascript

Edited 13 Years Ago by jonsan32

1 Contributor
3 Replies
329 Views
9 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by jonsan32

Dani AI

Generated 9 Months Ago

A concise solution: give each filter button a data-filter value and each event row class names (for example event camp, event tourny, etc.), then use one handler that tracks button state. That lets a first click make the clicked filter the only visible class, and a second click on the same button hide that class (leaving everything hidden). already found the root jQuery conflict and fixed it by consolidating the jQuery instance — that’s generally the cleanest route; if multiple libraries must coexist, wrap them or use jQuery.noConflict().

Example (vanilla JS, accessible, avoids inline handlers):

<!-- buttons: one with data-filter="all" acts as Show All -->
<button class="filter" data-filter="all">Show All</button>
<button class="filter" data-filter="camp">CAMPS</button>
<button class="filter" data-filter="clinic">CLINICS</button>

<!-- table rows: each has 'event' plus a type class -->
<tr class="event camp">...</tr>
<tr class="event clinic">...</tr>

// run after DOM ready
document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.filter');
  const rows = document.querySelectorAll('tr.event');

  function showAll() {
    buttons.forEach(b => b.classList.remove('active'));
    rows.forEach(r => r.classList.remove('hidden'));
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const filter = btn.dataset.filter;
      if (filter === 'all') return showAll();

      const isActive = btn.classList.contains('active');
      if (!isActive) {
        // activate this filter: hide everything, show matches
        buttons.forEach(b => b.classList.remove('active'));
        rows.forEach(r => r.classList.add('hidden'));
        document.querySelectorAll('tr.event.' + filter)
                .forEach(r => r.classList.remove('hidden'));
        btn.classList.add('active');
      } else {
        // deactivate this filter: hide its rows, leave others hidden
        document.querySelectorAll('tr.event.' + filter)
                .forEach(r => r.classList.add('hidden'));
        btn.classList.remove('active');
      }
    });
  });
});

Notes and troubleshooting

Use a CSS rule like .hidden { display: none; } so removing that class restores the row to its native table-row display.
Avoid inline onmouseover/onmouseout; use CSS :hover or delegated JS.
If you want multi-select behavior instead of exclusive filters, don't clear other buttons when activating one (or use checkboxes as in an earlier post).
If things still conflict, confirm only one jQuery is assigned to $ (or use noConflict) and check selector/class name typos with the browser console.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2012-12-17T05:19:40+00:00

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 12 Junior Poster in Training · Answer 2 · 2012-12-17T06:03:06+00:00

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 12 Junior Poster in Training · Answer 3 · 2012-12-17T06:25:57+00:00

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>