Expand and Collpse row on click row

Question

i have search for reference that used to expand and collapse row. But on my script its doesn't work, this is my script:

    <thead>   
    <tr>
        <th width="5" class="cb"><input type="checkbox" id="cbcall" /></th>

        <th> Domain</th>
        <th> Total Member</th>
        <th> Monthly Growth</th>
        <th> Growth % </th>
    </tr>
</thead>
<tbody>
    <?php foreach ( $this->paging as $kk=>$dom ): ?>
    <tr>
        <tr class="header" style="cursor:pointer;">
            <th><input type="checkbox" name="cb[]" value="<?php echo $dom['m'] ?>" /></th>
            <th colspan="3"><i class="fa fa-chevron-circle-right"></i>&nbsp<strong><?php echo $this->escape($dom['member_domain'])?></strong></th>
            <th></th>
        </tr>
        <?php foreach ( $this->paginator as $k=>$value ): ?>
            <tr>
            <?php if ($this->escape($value['member_domain']) == $this->escape($dom['member_domain'])){?>
                    <td></td>
                    <td><?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'.$this->escape($value['member_client']) ?> </td>
                    <td><center><?php echo $this->escape($value['1_month']) ?></center></td>
                    <td><center><?php echo $this->escape($value['1_month'])-$this->escape($value['2_month']) ?></center></td>
                    <td><center>
                        <strong><?php echo number_format((100 * ($this->escape($value['1_month'])-$this->escape($value['2_month'])))/$this->escape($value['1_month']),0)."%" ?>
                        </strong>
                        </center>
                    </td>
            <?php } ?>
            </tr>
        <?php endforeach; ?>    
    </tr>
    <?php endforeach; ?>
</tbody>

edit

and this is my script:

$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(100, function(){
    });
});

and the view look's like:

my view

i want to make an expand and collapse when the "Domain" name is click.

i have used this method and didn't works:

expand/collapse table rows with JQuery

iused jQuery 1.110. anyone help??

I have not worked with PHP but with JavaScript, Do you see any errors in console? — Raul, Nov 02 '15 at 06:40
There are several (working) methods in the post you've linked, we've no clue what your actual script is, and when you're executing it. Please add the relevant code to your post. — Teemu, Nov 02 '15 at 06:43
@RahulSharma anything is clean Sir, no red text on my console :( — Muchlis Insani, Nov 02 '15 at 07:55

score 0 · Accepted Answer · answered Nov 02 '15 at 06:41

$(document).ready(function(){
 $(".open-bext").click(function(){
     $(this).parents("tr").next("tr").show();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
    <tr>
        <td><a href="#" class="open-bext">Open</a>
        </td>
    </tr>
    
    <tr class="detail" style="display: none">
        <td>content will come here
        </td>
    </tr>
</table>

Code is not full but it will help you – Mitul Nov 02 '15 at 06:41 — Mitul, Nov 02 '15 at 06:41
thanks for reply, i dont know why no method works for me :( – Muchlis Insani Nov 02 '15 at 07:51 — Muchlis Insani, Nov 02 '15 at 07:51

Expand and Collpse row on click row

edit

1 Answers1