• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 72
  • Last Modified:

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.
<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>

Open in new window

0
romsom
Asked:
romsom
  • 3
  • 2
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
colspan=3 is a column not a row. And it is pointless to use colspan=3 when that field in every row is colspan=3. colspan is like merging cells in Excel. It means that this cell should span the width of 3 cells in another row in this table. Perhaps you have another row that makes this useful though.

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?
0
 
romsomAuthor Commented:
Yes, I'm using jQuery.
I would like to hide the entire row that contains the Person Details when a different Name is clicked.
0
 
Julian HansenCommented:
Try this
$(function() {
  $('tr:odd p').hide();
  $('tr:even').click(function() {
    $('tr:odd p').hide();
    $(this).next().find('p').slideToggle();
  });
});

Open in new window

1
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Kim WalkerWeb Programmer/TechnicianCommented:
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.
0
 
Julian HansenCommented:
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();
  });
});

Open in new window

0
 
romsomAuthor Commented:
Thank you very much, it's perfect.
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now