后台折叠删除效果

效果图：

上代码：

@extends('layouts.app')
@section('title', '订单管理')
@section('form')
    <div class="body container">
        <h1>订单管理</h1>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>订单编号</th>
                <th>客户端ID</th>
                <th>用户ID</th>
                <th>订单状态ID</th>
                <th>订单总金额</th>
                <th>订单详细信息</th>
                <th>收货地址</th>
                <th>订单关闭时间</th>
                <th>是否删除</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            @if(!empty($items))
                @foreach($items as $item)
                    <tr>
                        <td>{{$item->order_number}}</td>
                        <td>{{$item->client_id}}</td>
                        <td>{{$item->user_id}}</td>
                        <td>{{$item->status}}</td>
                        <td>{{$item->total_amount}}</td>
                        <td>{{$item->extra}}</td>
                        <td>{{$item->address}}</td>
                        <td>{{$item->closed_at}}</td>
                        @if($item->deleted == 0)
                            <td>正常</td>
                        @else
                            <td>删除</td>
                        @endif
                        <td>
                            <a data-id="{{$item->id}}"
                               class="btn-sm btn-info shows">全部展开/折叠</a>
                        </td>
                    </tr>
                    <tr class="sub_{{$item->id}}" style="display: none;">
                        <td colspan="4">商品ID</td>
                        <td colspan="13">{{$item->product_id}}</td>
                    </tr>
                    <tr class="sub_{{$item->id}}" style="display: none;">
                        <td colspan="4">商品购买数量</td>
                        <td colspan="13">{{$item->amount}}</td>
                    </tr>
                    <tr class="sub_{{$item->id}}" style="display: none;">
                        <td colspan="4">商品单价</td>
                        <td colspan="13">{{$item->price}}</td>
                    </tr>
                    <tr class="sub_{{$item->id}}" style="display: none;">
                        <td colspan="4">总金额</td>
                        <td colspan="13">{{$item->total_fee}}</td>
                    </tr>
                    <tr class="sub_{{$item->id}}" style="display: none;">
                        <td colspan="4">商品详情</td>
                        <td colspan="13">{{$item->product}}</td>
                    </tr>
                @endforeach
            @endif
            </tbody>
        </table>
    </div>
    <div class="pagination-wrapper">{!! $items->appends(request()->query->all())->render() !!}</div>
@stop
@section('js')
    <script type="text/javascript">

            $('.shows').off().on('click', function () {
                var id = $(this).data('id');
                $('.sub_' + id).toggle();
            });
    </script>
    @include('layouts.destroy-confirm')
@stop