JQuery toggle NextUntil parent tr from td with class
I have a table that is generated with the toggle class on the td and the toggle-more class on the next td line.
I'm trying to target the parent TR and use that until it switches the visibility of the next TR after the togglelink td class and indicates that the nextotheral parent tr td will switch.
This is my table
<table width=100% >
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
<tr>
<td class="toggle">Agriculture</td>
<td> </td>
</tr>
<tr>
<td class="toggle-more" > Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle-more" > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr>
<td class="toggle-more" > Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle">Blah Blah</td>
<td > </td>
</tr>
<tr class="toggle-more" >
<td> Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td class="toggle">Blah Blah</td>
<td > </td>
</tr>
<tr class="toggle-more" >
<td> Aquaculture</td>
<td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td > Dairy Production</td>
<td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td>Health</td>
<td><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
<tr >
<td >Dental</td>
<td ><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
</table>
and here is my jQuery.
$(document).ready(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
var is_visible = false;
$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('.toggle').css({
//width: '100%'
});
$('.toggle-more').closest( 'tr' ).hide();
$('a.toggleLink').click(function() {
is_visible = !is_visible;
$('.showtext').html( ($('.showtext').html() == hideText) ? showText : hideText);
$(this).parents('tr').nextUntil('td:not(.toggle-more)').animate({ opacity: "toggle" });
return false;
});
});
It almost works. What am I doing wrong and is there a better way to do this?
The past 2 lines do not switch or switch.
+3
source to share
2 answers
Whenever you need multiple table rows to represent a single boolean element, I would suggest grouping those rows into tags <tbody>
(yes, that's perfectly valid HTML).
That being said, you can ditch .nextUntil()
in favor of the method .siblings()
and, in my opinion, make it easier to play with jQuery.
JsFiddle: See demo here
HTML:
<table width="100%">
<thead>
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="toggle">Agriculture</td>
<td> </td>
</tr>
<tr>
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
Click to Select
</td>
</tr>
<tr>
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
Click to Select
</td>
</tr>
<tr>
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="toggle">Blah Blah</td>
<td> </td>
</tr>
<tr>
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
Click to Select
</td>
</tr>
<tr>
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
Click to Select
</td>
</tr>
<tr>
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Health</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
Click to Select
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Dental</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
Click to Select
</td>
</tr>
</tbody>
</table>
JQuery
$(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('table tbody').each(function(){
$(this).find('tr').not(':first').hide();
});
$('a.toggleLink').click(function() {
var $a = $(this);
$a.find('.showtext').html( ($a.find('.showtext').html() == hideText) ? showText : hideText);
$a.closest('tr').siblings('tr').animate({ opacity: "toggle" });
return false;
});
});
Hope it helps.
0
source to share
I believe this is what you are looking for: http://jsbin.com/equqaw/1/
As you can see here , I've made some markup and jQuery changes. All classes are toggle
and are toggle-more
now on tr
, and the click function is now slightly different.
Markup:
<table>
<tr>
<th>Description</th>
<th>Actions</th>
</tr>
<tr class="toggle">
<td>Agriculture</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr class="toggle">
<td>Blah Blah</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr class="toggle">
<td>Blah Blah</td>
<td> </td>
</tr>
<tr class="toggle-more">
<td> Aquaculture</td>
<td>
<input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Dairy Production</td>
<td>
<input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
Click to Select</td>
</tr>
<tr class="toggle-more">
<td> Horitculture</td>
<td>
<input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
Click to Select</td>
</tr>
<tr>
<td>Health</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
<tr>
<td>Dental</td>
<td>
<input type="checkbox" name="LookUpItem_16" value="1910|Dental">
Click to Select</td>
</tr>
</table>
JQuery
$(document).ready(function () {
var showText = '+ Show Options';
var hideText = '- Hide Options';
$('.toggle td:nth-child(2)').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append(' <span class="showtext">' + showText + '</span>');
$('.toggle').css({
//width: '100%'
});
$('.toggle-more').closest('tr').hide();
$('a.toggleLink').click(function () {
var showTextSpan = $(this).find('.showtext');
showTextSpan.html((showTextSpan.html() == hideText) ? showText : hideText);
$(this).closest('tr').nextUntil('tr:not(.toggle-more)').animate({
opacity : "toggle"
});
return false;
});
});
Hope it helps. Feel free to ask any questions you have as comments ...
0
source to share