jeudi 6 août 2015

if else - php display based on css value ? is posibol?

I want to display an DIV based on the ---li class=active--- , so if the li class is not active, need to hide this div.

This is my code (I comment in the code where i need to display/hide the div)

    @if ( ! $links->isEmpty())
        <div id="videos">
                <table class="table table-striped links-table">
                <thead>
                    <tr>
                        <th class="name">{{ trans('stream::main.name') }}</th>
                        <th>{{ trans('stream::main.quality') }}</th>
                        <th>{{ trans('stream::main.report') }}</th>
                        <th>{{ trans('stream::main.added') }}</th>
                    </tr>
                </thead>
                <tbody>
            <ul class="nav nav-tabs">

                @foreach ($links as $k => $video)             
                        @if((int)$video->approved)


                            <li {{ $k === 0 ? 'class="active"' : null }} id="{{$video->id}}" style="list-style-type: decimal-leading-zero;">
                            <table class="table table-striped links-table"><tr>
                                <td class="name hover">
                                <a href="#" data-bind="click: renderTab.bind($data, {{(int)$video->id}}, '{{$video->url}}', '{{$video->type}}', 500)">
                                    <img data-bind="attr: {src: app.utils.getFavicon('{{$video->url}}')}"> {{ $video->label }}</a></td>
                                <td style="width:110px;">{{$video->quality}}</td>
                                <td style="width:110px;"><i class="fa fa-warning text-primary"></i> <a href="#" data-bind="click: report.bind($data, '{{$video->id}}')">{{ trans('stream::main.report') }}</a></td>
                                <td style="width:110px;">{{$video->created_at->diffForHumans()}}</td>
                            </tr></table>
                            </li>
//------DOWN IS THE DIV, AND NEED TO DISPLAY JUST IF THE CLASS IS ACTIVE-------------
                            <div class="tab-content"></div>
//-------------------
                        @endif             
                @endforeach

            </ul>
                </tbody>
            </table>

        </div>

        <video id="trailer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="100%" height="500px"> </video>
    @endif

Of corse, any other solution will be OK.

Aucun commentaire:

Enregistrer un commentaire