Как правильно настроить табы?

вопрос

Здравствуйте. Есть три таба, скажем 1, 2 и 3. Каждый из них отображается только в случае, если заполнено доп. поле выделенное для каждого таба. Проблема в том, что содержимое табов не показывается, если не заполнено поле 2. Что не так?

HTML:

        <div class="tabs">
            <ul class="reset">
                [xfgiven_show]<li id="player-film"[xfgiven_film_player] class="active"[/xfgiven_film_player]>Смотреть сериал <i class="fa fa-video-camera"></i></li>[/xfgiven_show]
                [xfgiven_film_player]<li id="player-film"[xfgiven_trailer_player] class="active"[/xfgiven_trailer_player]>Смотреть фильм <i class="fa fa-video-camera"></i></li>[/xfgiven_film_player]
                [xfgiven_trailer_player]<li id="player-trailer"[xfnotgiven_film_player] class="active"[/xfnotgiven_film_player]>Смотреть трейлер <i class="fa fa-youtube-play"></i></li>[/xfgiven_trailer_player]
            </ul>
            </br></br></br></br>
            [catlist=16]{include file="/engine/modules/moonserials.php"}[/catlist]
            [xfgiven_film_player]<iframe src="[xfvalue_film_player]" class="player_frame player-film" frameborder="0" allowfullscreen></iframe>[/xfgiven_film_player]
            [xfgiven_trailer_player]<iframe src="https://www.youtube.com/embed/[xfvalue_trailer_player]?rel=0&amp;showinfo=0" class="player_frame player-trailer[xfnotgiven_film_player] block[/xfnotgiven_film_player]" frameborder="0" allowfullscreen></iframe>[/xfgiven_trailer_player]
        </div>
    </div>

CSS:

.fullfilm .player .tabs {
    overflow: hidden;
    border-top: 1px solid #dcdcdc;
}

.fullfilm .player .tabs ul {
    padding: 0 15px;
}

.fullfilm .player .tabs li {
    float: left;
    padding: 18px 15px 22px;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

.fullfilm .player .tabs li.active {
    color: #c71d1d;
}

.fullfilm .player .tabs li .fa {
    margin-left: 5px;
    font-size: 27px;
    position: relative;
    bottom: -3px;
}