We help IT Professionals succeed at work.

Jquery Hide

garyilm asked
I have a dynamic table with a toggle show row. When the page loads the sub rows are visiable. How do I make them hidden until I expand them. Here is the code that I am working with.

<script type="text/javascript">

        function togglePanelMore(thenext, source) {
    var viewContainer = $(thenext);
    if ($(source).html() == "-") {
    else {

<a href="javascript:togglePanelMore('#row<%=i+1%>', '#togglerow<%=i+1%>')" id="togglerow<%=i+1%>">+</a>
Watch Question

    // define your sub selector here
    var subselector = '[id^="row"]';  // all sub with id starting with "row"

Open in new window



At the beginning of your script, this will hide the row by default.

Is something like this of any use:

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>

jQuery(document).ready( function() {

  $(".expand").each( function() {
    var group = $(this).attr("group");
    $(this).click( function() {
      $(this).text( ( $(this).text() == "+" )? "-": "+" );
      toggle( group );
    toggle( group );
    $(this).css( {textDecoration: "none"} );

  function toggle( group ) {
    $("tr[rel=" + group).toggle();




<table border="1">
<tr><td><a class="expand" href="#" group="group-a">+</a></td><td colspan="2">&larr; toggle rows</td></tr>
<tr rel="group-a"><td></td><td>some</td><td>stuff</td></tr>
<tr rel="group-a"><td></td><td>more</td><td>stuff</td></tr>
<tr rel="group-a"><td></td><td>other</td><td>stuff</td></tr>

<tr><td><a class="expand" href="#" group="group-b">+</a></td><td colspan="2">&larr; toggle rows</td></tr>
<tr rel="group-b"><td></td><td>some</td><td>stuff</td></tr>
<tr rel="group-b"><td></td><td>more</td><td>stuff</td></tr>
<tr rel="group-b"><td></td><td>other</td><td>stuff</td></tr>

<tr><td><a class="expand" href="#" group="group-c">+</a></td><td colspan="2">&larr; toggle rows</td></tr>
<tr rel="group-c"><td></td><td>some</td><td>stuff</td></tr>
<tr rel="group-c"><td></td><td>more</td><td>stuff</td></tr>
<tr rel="group-c"><td></td><td>other</td><td>stuff</td></tr>


Open in new window