score:0

now it came much easier, since bootstrap implemented collapse functionality. look here

score:1

your code is working for me - the hidden row is toggled on click. check out this bootply: http://www.bootply.com/qzpe6dsp1f.

perhaps you aren't loading jquery?

score:1

i adapted c. draghici's answer to a new version of react and react-bootstrap:

onclickhandler = (e) => {
    const hiddenelement = e.currenttarget.nextsibling;
    hiddenelement.classname.indexof("collapse show") > -1 ? hiddenelement.classlist.remove("show") : hiddenelement.classlist.add("show");
};
<table>
    <thead>
    <tr>
        <th>#</th>
        <th>date</th>
        <th>description</th>
        <th>credit</th>
        <th>debit</th>
        <th>balance</th>
    </tr>
    </thead>
    <tbody>
    <tr onclick={this.onclickhandler}>
        <td>1</td>
        <td>05 may 2013</td>
        <td>credit account</td>
        <td classname="text-success">$150.00</td>
        <td classname="text-error" />
        <td classname="text-success">$150.00</td>
    </tr>
    <tr classname="collapse">
        <td colspan="6">
            demo content1
        </td>
    </tr>
    </tbody>
</table>

score:2

<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th>#</th>
            <th>date</th>
            <th>description</th>
            <th>credit</th>
            <th>debit</th>
            <th>balance</th>
        </tr>
    </thead>
    <tbody>
        <tr onclick={this.onclickhandler}>
            <td>1</td>
            <td>05 may 2013</td>
            <td>credit account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
        </tr>
        <tr >
            <td colspan="6" class="hiddenrow"><div class="collapse" id="demo1"> demo content1 </div> </td>
        </tr>       
    </tbody>
</table>

private onclickhandler(e: react.mouseevent<htmltablerowelement>) {
  const hiddenelement = e.currenttarget.nextsibling.firstchild.firstchild as htmlelement;
  hiddenelement.classname.indexof("collapse in") > -1 ? hiddenelement.classlist.remove("in") :  hiddenelement.classlist.add("in");
}

Related Query

More Query from same tag