Jquery Hide

garyilm
garyilm used Ask the Experts™
on
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() == "-") {
        $(source).html("+");
        viewContainer.hide();
    }
    else {
        $(source).html("-");
        viewContainer.show();
    }
}
    </script>


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

Do more with

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

Commented:
$(document).ready(function(){
    // define your sub selector here
    var subselector = '[id^="row"]';  // all sub with id starting with "row"
    $(subselector).hide();
});

Open in new window

Add

$(thenext).hide();

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

Is something like this of any use:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27482267.html</title>
<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>
<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();
  }

});

</script>
</head>

<body>

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

</body>
</html>

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