Stefan Motz
asked on
Show and hide elements with JavaScript
Hi Experts,
Please take a look at the attached code. My goal is to close any open row that shows the details when a different name is clicked.
Right now all colspan="3" rows can be opened simultaneously. How can the code be modified so that only one colspan="3" row can be open when a Name is clicked?
Thank you for your help.
Please take a look at the attached code. My goal is to close any open row that shows the details when a different name is clicked.
Right now all colspan="3" rows can be opened simultaneously. How can the code be modified so that only one colspan="3" row can be open when a Name is clicked?
Thank you for your help.
<html>
<head>
<title>Toggle</title>
<script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("td[colspan=3]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>
</head>
<body>
Click on a row for more info:
<table border ="1">
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>First Person Details</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Second Person Details</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Third Person Details</p>
</td></tr>
</table>
</body>
</html>
ASKER
Yes, I'm using jQuery.
I would like to hide the entire row that contains the Person Details when a different Name is clicked.
I would like to hide the entire row that contains the Person Details when a different Name is clicked.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I guess I need to slow down. I read those as three long rows of cells instead of 6 short rows. On my screen the first row ran the full width of the box so I thought it just word wrapped to the next line. I should know that code doesn't word wrap.
Anyway, Julian has provided the code you need.
Anyway, Julian has provided the code you need.
Slight improvement - fixes problem of slideToggle on open item if clicked
$(function() {
$('tr:odd p').hide();
$('tr:even').click(function() {
if (!$(this).next().find('p').is(':visible')) {
$('tr:odd p').hide();
}
$(this).next().find('p').slideToggle();
});
});
ASKER
Thank you very much, it's perfect.
You are welcome.
Are you wanting to hide just the colspan=3 cells and leave the other cells on that row visible. Otherwise, how would you click on the name if the whole row is hidden?
You cannot hide a table cell (<td>) without disrupting your table structure. However, since you've used <p> tags within your table, you could hide the <p> elements within those cells. This would be much easier in jQuery. Are you able to use jQuery?