CODEWITHSUNDEEP
phphtmllaravel
Andrei Nagy
Andrei Nagy

Reputation: 251

How can I make this tab active by default?

I have some tabs and I want to make the first tab active by default. Now, isn't active, only if I press a tab is working. I want to make the first tab active by default.

here is my code:

<ul class="nav nav-tabs">
    <?php $count_contact = 0; ?>
    @foreach($user->contact as $contact)    
        <li class=<?php if($count_user == 0){ echo "active"; } ?> >
            <a data-toggle="tab" href="#contact<?php echo $count_contact++; ?>">
                <?php $img = asset('thumbnail').'/'.$contact->profile_picture; ?>
                @if(@getimagesize($img))
                    <img class="img-circle noticeboard-profile-picture" src="{{ url('ass/50/50?'.$img) }}" alt=""></a>
                @else
                    <?php $img = "assets/img/user.jpg"; ?>
                    <img class="hover-effect" alt="" src="{{ url('ass/54/54?'.$img) }}" width="50px">
                @endif
            </a>
        </li>
    @endforeach
</ul>

the first tab has id contact0.

Upvotes: 1

Views: 585

Answers (2)

Hasta Dhana
Hasta Dhana

Reputation: 4719

Maybe what you want to use is $count_contact instead of $count_user. Try to change : 

<li class=<?php if($count_user == 0){ echo "active"; } ?> >

To : 

<li class=<?php if($count_contact == 0){ echo "active"; } ?> >

Upvotes: 2

nakov
nakov

Reputation: 14268

Blade provides $loop variable which you can access in the loop. So change your code to this:

<ul class="nav nav-tabs">
    <?php $count_contact = 0; ?>
    @foreach($user->contact as $contact)    
        <li @if($loop->first) class="active" @endif>
            <a data-toggle="tab" href="#contact<?php echo $count_contact++; ?>">
        <?php $img = asset('thumbnail').'/'.$contact->profile_picture; ?>
        @if(@getimagesize($img))
            <img class="img-circle noticeboard-profile-picture" src="{{ url('ass/50/50?'.$img) }}" alt=""></a>
        @else
        <?php $img = "assets/img/user.jpg"; ?>
            <img class="hover-effect" alt="" src="{{ url('ass/54/54?'.$img) }}" width="50px">
           @endif
           </a>
       </li>
    @endforeach

</ul>

Upvotes: 1

Related Questions