 asked on 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!
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!
jQuery
Last Comment
Bruce Gust
ASKER
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!
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!
you need to differentiate row with classes and use data-employer attribute for example.
it's possible ?
it's possible ?
ASKER
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:
And then I've got several rows following my title and I have those designated as "satellite_pages."
The JQuery I'm attempting looks like this:
$('#toggle').click(functio
           $("#toggle").parents("tr")
      });
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...
Thanks!
Here's a screenshot of my 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>
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-->
(E)
</td>
The JQuery I'm attempting looks like this:
$('#toggle').click(functio
           $("#toggle").parents("tr")
      });
When I click it, I get this:
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> <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;">🔨</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-->
(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;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</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;">
<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>
<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-->
(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;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☑
</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;">
<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>
<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;">
☑
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</td>
<td style="text-align:center; font-size:12pt;">
☐
</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;">
<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>
<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 © 2017 Applied Health Analytics. All Rights Reserved. | (855) 581-9910</footer>
</body>
</html>
Thanks!
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Perfect!
Thanks!
Thanks!
Open in new window
by :Open in new window