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

Question

I want to display a div based on li with class=active, so that if the li does not have class as active, the div should be hidden.

Here is my code (I have commented 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

dakine · Accepted Answer · 2015-08-08 01:02:23Z

3

why not do this.

@if($k === 0)
<div class="tab-content"></div>
@endif

or

<div {{ $k === 0 ? 'style="display:none"' : '' }} class="tab-content"></div>

Update

what would i do in your case is something like this.

in your li add a class.

    <li class="video_content" id="{{$video->id}}" 
             style="list-style-type: decimal-leading-zero;">

then i put the div inside the list. right now if you inspect the list it's not rendering correctly.

<li class="video_content" id="{{$video->id}}" 
                 style="list-style-type: decimal-leading-zero;">
   //CONTENTS
   <div {{ $k === 0 ? 'style="display:none"' : '' }} class="tab-content"></div>
</li>

then i'll add a jquery script

<script>
  $(document).ready(function(){
    $('.video_content').click(function(){
       $(this).find('tab-content').show();
    });
 });
</script>

edited Aug 8, 2015 at 1:02

answered Aug 7, 2015 at 1:33

dakine

7095 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

aladin2222 Over a year ago

Hi dakine, this codes dont work for me, but i see you use laravel, and maybe you can help me to find the solution, in order to do this, here are FULL php, js and css: seriespepe.tv/new/tests/php.txt - seriespepe.tv/new/tests/js.txt - seriespepe.tv/new/tests/css.txt - And this is the test page - seriespepe.tv/new/series-online/2-beach-heat-miami/seasons/1/…

dakine Over a year ago

from my understanding is that you want to hide the div if li class is not active. which is generated based on a condition if $k === 0 which $k is an index of an array. my suggestion was to use the condition $k === 0 to hide or display the div since it's the same thing. so why does this code doesn't work. is there other things to be considered.

aladin2222 Over a year ago

now i use your first code, and if you check seriespepe.tv/new/series-online/2-beach-heat-miami/seasons/1/… - you can see... all players are open under the first li (111) - to check, please click on 222, 333,....

aladin2222 Over a year ago

of corse, first li (111) is active on load, but if you make click on second li (222), this second li is "active" and first li dont have any class. I need to have the player (div class="tab-content") down, on the active li

dakine Over a year ago

so what you want to accomplish is that the first item show the div then the remaining items have div's that are hidden. then you want to click the item to show the div. is that what you're trying to accomplish. if so. you need some query to accomplish the task. confirm if my assessment is correct and i'll show you how to do it with jquery.

|

Amadan · Accepted Answer · 2015-08-07 01:16:50Z

1

You can't have PHP react to classes; it should be the other way around, PHP determining what classes things have, as it is generating the HTML. This can be done with CSS only: hide the elements you want hidden, set them to visible when they get the class you intend. An easy sample:

.invisible-when-inactive {
  display: none;
}
.invisible-when-inactive.active {
  display: block;
}

<div>
  Normal div
</div>
<div class="invisible-when-inactive">
  Hidden div 1
</div>
<div class="invisible-when-inactive active">
  Active hidden div
</div>

answered Aug 7, 2015 at 1:16

Amadan

200k23 gold badges252 silver badges321 bronze badges

Comments

Jonathan Michalik · Accepted Answer · 2015-08-07 01:22:46Z

0

Amadan's CSS approach works well if you're looking to avoid writing JavaScript, but in case it's an option, you can use the ID on the li to check if it has a class on it:

if ($('#idOfListItem').hasClass('active')) {
    $('#idOfDiv').show();
} else {
    $('#idOfDiv').hide();
}

You'll need to assign an ID (or classes that work together) to the div associated with the li in order to do show and hide with this approach.

edited Aug 7, 2015 at 1:22

answered Aug 7, 2015 at 1:17

Jonathan Michalik

1,54214 silver badges15 bronze badges

Comments

Ray · Accepted Answer · 2015-08-07 01:24:55Z

0

This shouldn't be done with PHP. It should be done with CSS. Make sure to add them to your css document in the exact order listed

Hidden State

.tab-content {
   display: none;
}

Active State

li.active + .tab-content {
   display: block;
}

edited Aug 7, 2015 at 1:24

answered Aug 7, 2015 at 1:18

Ray

8841 gold badge6 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related