How can I get these rows to toggle?

Head out to http://brucegust.com/applied/adm/dummy.htm# and behold my dilemma.

I want to be able to expand the table rows by clicking on the little "+" sign to the right of the Employer name.  I was using https://codepen.io/andornagy/pen/gaGBZz as a guide, but I'm missing something.

I need some ninja to tell me where I'm blowing it so I can this puppy to work.

Thanks!
brucegustPHP DeveloperAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
from your current code (online), replace :
	$('#toggle').click(function() {
			$("#toggle").closest("table").find("tr:gt(1)").toggle();
	});

Open in new window

by :
$("a[id='toggle']).click(function() { // ID must be unique in a document... we use a workaround here...
	var employerName = $(this).parent().text().replace(/\+$/,"");
	$(this).parent().parent().nextAll("tr").filter(function() { 
		return $(this).find("td:eq(0)").find("a").text() == employerName;  
	}).toggle();
});

Open in new window


click on first onework for second one too
0
 
leakim971PluritechnicianCommented:
replace :
	$('#toggle').click(function() {
		$('[data-toggle="toggle"]').change(function() {
			$(this).parents().next('.show').toggle();
		});
	});

Open in new window

by :
	$('#toggle').click(function() {
			$("#toggle").closest("table").find("tr:gt(1)").toggle();
	});

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
leak!

We are poised on the threshold of great things!

Head out to http://brucegust.com/applied/adm/dummy.htm#, however, and you'll see where I'm still stuck.

After incorporating your suggestion, I can expand all the rows, thing is I need to expand only those rows that are relative to that particular employer.

What's the "tweak" I need to incorporate so that I'm expanding only those rows that correspond to Applied Health Analytics when I click on that arrow as opposed to expanding all of the rows to include Treasure Coast?

Thanks!
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
leakim971PluritechnicianCommented:
you need to differentiate row with classes and use data-employer attribute for example.
it's possible ?
0
 
brucegustPHP DeveloperAuthor Commented:
Leak, I'm close but I'm still missing something...

Here's a screenshot of my starting point...

starting point
And here's a portion of my source code:

<!--this is the first row --><tr class="title_page">
										<td colspan="4" style="background-color:#cccccc; font-weight:bold;">Applied Health Analytics<a id="toggle" href="#">+</a></td>
									</tr>

Open in new window


And then I've got several rows following my title and I have those designated as "satellite_pages."

<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=6" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(E)
												
										</td>

Open in new window


The JQuery I'm attempting looks like this:

$('#toggle').click(function() {
            $("#toggle").parents("tr").next('.satellite_pages').toggle();
      });

When I click it, I get this:

almost there...
That's almost it. The problem is there should be several rows displayed under Applied Health Analytics and there's only one. What am I missing?

Here's all of the source code, just so you have it...

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Applied Health Analytics | Admin Page</title>

<!-- these are files that allow for the tooltip functionality -->
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script src="js/jscolor.js"></script>

<script>
$(document).ready(function() {
	//this activates the tooltip functionality
	$('.tooltip').tooltipster({
	theme: 'tooltipster-light',
	interactive: true
	});

	tinymce.init({
	theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
		font_size_style_values: "12px,13px,14px,16px,18px,20px",
		force_br_newlines : false,
		force_p_newlines : false,
		forced_root_block : '',
		selector: "textarea",
		theme: "modern",
		width : "645",
		height:"350",
		relative_urls : false,
		remove_script_host : true,
		plugins: [
			"advlist autolink lists link image charmap print preview hr anchor pagebreak",
			"searchreplace wordcount visualblocks visualchars code fullscreen",
			"insertdatetime media nonbreaking save table contextmenu directionality",
			"emoticons template paste textcolor moxiemanager"
		],
		toolbar1: "insertfile undo redo | styleselect | bold italic | | fontselect |  fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
		toolbar2: "print preview media | forecolor backcolor emoticons",
		image_advtab: true,
		templates: [
			{title: 'Test template 1', content: '<b>Test 1</b>'},
			{title: 'Test template 2', content: '<em>Test 2</em>'}
		],
		autosave_ask_before_unload: false
	});
});

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="content">
  <div class="content-inside">
    <!-- this is your content -->
	<!-- here's your header graphic -->
	<a href="logout.php"><img src="../images/logout.jpg" style="position:absolute; margin-left:775px; margin-top:102px; width:95px;" border="0"></a>
		<table class="admin">
			<tr>
				<td style="text-align:center;">
				<IMG SRC="../images/admin_header.jpg">
				</td>
			</tr>
			<tr>
				<td>
<style>

td.admin_header {
	background-color:#000000;
	color:#ffffff;
	font-weight:bold;	
	text-align:center;
}

table.admin_table {
	width:100%;
	border-collapse: collapse;
}

table.admin_table td {
	height:15px;
	padding:5px;
}

table.admin_table tr {
	border-bottom:1px solid #cccccc;
}

table.admin_table tr:last-child {
	border-bottom:none;
}

li {
	margin-bottom:8px;
}

[data-toggle="toggle"] {
	display:table-row;
}

</style>

<table class="admin_content">
	<tr>
		<td class="admin_title">
		<b>Employer List Page</b>
		</td>
	</tr>
	<tr>
		<td>&nbsp;<BR>
		</td>
	</tr>
	<tr>
		<td style="width:100%;">
			<div class="admin_box">
				<table style="width:100%;">
					<tr>
						<td colspan="2"><br>Below is a list of all the employers and their respective landing pages that are currently in the database. To edit or delete an entry, simply click on the appropriate link.
						<br><br>
						<div style="width:95%; padding:10px; margin:auto; border:1px solid #cccccc; border-radius:10pt; display:inline-block;">
							In most instances, an employer will have more than one page, depending on their particular needs. This explains <a id="explain">
							<img src="../images/expand_button.png" style="width:25px; display:inline-block; float:right; margin-top:10px;" border="0" id="the_button"></a>why you have the "Home | Welcome | Member | Spouse" qualifiers. 
							Click on the down arrow to the right to see more detail on how to interpret the various symbols and features on this page.
						</div>
						<div id="instructions" style="display:none;"><ul><li>Each Channel Partner, typically has a Home page followed by a satellite page where the user will actually login. That's why you've got more 
						than one page listed per Channel Partner / Employer</li>
						<li>Click on the employer's name to see a sample of that particular page</li>
						<li>For those pages that offer a Spanish speaking option, you'll see that designated with a "yes" beneath the "Spanish" column.<br><br>
							<ul><li>Those pages that are written in Spanish are denoted with a (S) to the right of the Channel Partner / Employer's name. Those pages written in English have a (E) to the right of their name.</li>
							<li>The "Welcome" page is unique to the Spanish speaking Landing Page in that you will first direct users to choose between Spanish and English, and then perhaps "welcome" them and 
							ask them to choose between the Employee and Spouse track.</li></ul></li>
						<li>To the right of every page, you'll see links to "edit," "delete" or "build." The only things you can change are basic aesthetic elements. If you need to change anything in terms of functionality, 
						your best bet is to create a new Landing Page altogether.</li>
						<li>The "build" option (<span style="color:#000000;">&#x1f528;</span>) is displayed only in those cases where a Landing Page has yet to be completed - meaning there isn't any page 
						where a user can login. In that case, the administrator can click on the hammer and be connected to the page that will allow the user to finish the Landing Page sequence without 
						having to start at the very beginning.</li>
						<li>In some instances, there's a substantial amount of customization associated with a particular employer. In those cases, they are being redirected to a custom URL. 
						They'll still be listed in the database, but their syntax and text is hardcoded on a unique htm file located on a directory on the server. Those pages are listed in green.</ul></div>
						</td>
					</tr>
					<tr>
						<td colspan="2"><br>
						Click <A HREF="admin.php">here</a> to return to the admin page.<br><br>If you need any help of have any questions, contact Bruce Gust at <A HREF="mailto:b.gust@appliedhealth.net">b.gust@appliedhealth.net</a>
<P>
Thanks!						<hr>
						</td>
					</tr>
					<tr>
						<td colspan="2"><br></td>
					</tr>
					<tr>
						<td>
							<table class="admin_table">
								<tr>
									<td class="admin_header">Employer Name</td>
									<td class="admin_header">Spanish</td>
									<td class="admin_header">Home | Welcome | Member | Spouse</td>
									<td class="admin_header">Build / Edit / Delete</td>
								</tr>
																									<tr class="title_page">
										<td colspan="4" style="background-color:#cccccc; font-weight:bold;">Applied Health Analytics<a id="toggle" href="#">+</a></td>
									</tr>
																		<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=6" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(E)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=6&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=6" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=23" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(S)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=23&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=23" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=24" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(E)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=24&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=24" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=35" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(S)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																										&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=35&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=35" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=36" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(E)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																										&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=36&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=36" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=37" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(S)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=37&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=37" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=38" target="_blank" style="text-decoration:none; color:#000000;">Applied Health Analytics</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
																					&nbsp;(E)
												
										</td>
										<td style="text-align:center;">
										yes										</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=38&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=38" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
																									<tr class="title_page">
										<td colspan="4" style="background-color:#cccccc; font-weight:bold;">Treasure Coast Medical Center<a id="toggle" href="#">+</a></td>
									</tr>
																		<tr class="satellite_pages" style="display:none;">
										<td><a href="sample.php?id=40" target="_blank" style="text-decoration:none; color:#000000;">Treasure Coast Medical Center</a>
										<!--this part looks to see if you're dealing with a Spanish page and, if so, if this is the Spanish version-->
											
										</td>
										<td style="text-align:center;">
																				</td>
										<td style="text-align;center;">
											<table style="width:80%; margin:auto;">
												<tr>
													<td style="text-align:center; font-size:12pt;">
																											&#9745;
																										</td>
													<td style="text-align:center; font-size:12pt;">
																											&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
													<td style="text-align:center; font-size:12pt;">
														
														&#9744;
																										</td>
												</tr>
											</table>
										</td>
										<!-- getting the "build" id - the last page of a series of Landing Pages. We're checking to see if there's a place to login and, if not, a "build" link will be displayed that will allow the administrator to proceed with the construction
										of the Landing Page community for this Channel Partner / Employer -->
																				<td style="text-align:center; font-size:20pt;">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;										<a href="employer_display.php?id=40&Edit=Yes" style="color:#000000; text-decoration:none;"><img src="../images/edit.png" style="width:25px;" border="0"></a>&nbsp;&nbsp;
										<a href="employer_display.php?id=40" style="color:#000000; text-decoration:none;"><img src="../images/trash.png" style="width:30px;" border="0"></a></td>
									</tr>
															</table>
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

<script>
$(document).ready(function() {
	
	$('#explain').click(function(event) {
		event.preventDefault();
		$('#instructions').slideToggle(300, function() {
			if($('#instructions').css('display') === 'block')
			{
				$('#the_button').attr('src', '../images/minimize_button.png');
			}
			else
			{
				$('#the_button').attr('src', '../images/expand_button.png');
			}
		});
	});
	
	$('#toggle').click(function() {
		$("#toggle").parents("tr").next('.satellite_pages').toggle();
		//$(this).next('tr').slideToggle();
	});
	
});
</script>

				</td>
			</tr>
		</table>
<!-- end of your content -->
	</div>
	<!-- this is the end of your content -->
  </div>
</div>

<footer class="footer">Copyright &copy; 2017 Applied Health Analytics. All Rights Reserved.  |  (855) 581-9910</footer>

</body>
</html>		

Open in new window


Thanks!
0
 
brucegustPHP DeveloperAuthor Commented:
Perfect!

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.