Search code examples
jqueryhtml-tableshow-hide

JQuery expandable table options will not hide automatically


I'm pretty new to JQuery and have pretty shoddy Javascript skills, so apologies if I've missed something really obvious.

I have use the following code from the source below to make a table that has items that expand with more information once clicked:

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle('fast');
        });
    $('tr[@class^=child-]').hide().children('tr');
});

http://www.javascripttoolbox.com/jquery/

Currently by default the table is showing the child information (that should be hidden), but will collapse when the row is clicked on.

I would like it to be hidden by default.


Solution

  • Your code is producing the following error:

    Uncaught Error: Syntax error, unrecognized expression: [@class^=child-] 
    

    What you need is:

    $('tr[class^=child-]').hide().children('tr');
    

    http://jsfiddle.net/ZD4qE/