Jquery Hide

garyilm used Ask the Experts™
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial