Красиво оформляем разворачивающийся (collapsed) блок со списком ListView в Yii2

Код в виде

<div class="panel panel-chertanovo voffset30">
        <div class="panel-heading" role="tab" id="heading9">
            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse9" aria-expanded="false" aria-controls="collapse9">
              <span class="h2 panel-title">Спорт</span><span class="pull-right glyphicon glyphicon-plus glyphicon-2x"></span>
            </a>
        </div>
        <div id="collapse9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading9">
          <div class="panel-body">
            <div class="media">
              <div class="media-left media-top">
                
              </div>
              <div class="media-body">
                <div class="list-group">
                    <?= ListView::widget([
                        'dataProvider' => $dataProvider_sport,
               
                        'itemView' => '_view_list',
                        'layout' => '{items}',
                        'sorter' => [
                            'attributes'=>['id','name'],
                            'sort'=>'ASC',
                        ],
                        'options' => [
                            'tag'=>'ul',
                            'class' => 'list-unstyled'
                        ],
                        'itemOptions' => [
                            'tag'=>false,
                        ],
                    ]) ?>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

Здесь мы заменяем блок по умолчанию 'div' на 'ul' и убираем обёртку каждого элемента списка в div.

Код вида для отдельного элемента списка ListView

<?php

use yii\helpers\Html;
?>
  <?php (!empty($model->name_t)) ? $name=Html::encode($model->name_t) : $name=Html::encode($model->name); ?>
  <?php (!empty($model->image)) ? $image='../images/groups/'.Html::encode($model->image) : $image = "../images/pics/logo.jpg"; ?>
  <?php (!empty($model->age_up)) ? $age_up = Html::encode($model->age_up)."+" : $age_up = ""; ?>
              
            <li class="group-li"><span class="glyphicon glyphicon-menu-right li-margin10"></span><?= Html::a('<span class="list-group-item-heading text-left">'.$name.' <span class="badge">'.$age_up.'</span></span>', 
                    ['view', 'id' => $model->id, 'alias' => $model->alias], ['class'=>'list-group-che activ']); ?></li>

Стили css

.panel-chertanovo {
    background-color: rgba(52,169,225,1);
    border-color: rgba(52,169,225,1);
    color: #fff !important;
}
.panel-chertanovo a h2.panel-title, .panel-chertanovo .h2.panel-title {
    color: #fff;
}
.panel-chertanovo .panel-heading {
    padding: 0;
}
.panel-chertanovo a {
    padding: 10px 15px;
    text-decoration: none !important;
    color: #fff !important;
}
a.list-group-che {
    padding: 0;
}
a.list-group-che:hover {
    text-decoration:underline !important;
}
.list-group-item-heading {
    margin-bottom: 20px;
}
li.group-li {
    text-indent: -14px;
    margin-bottom:10px;
}
.list-group {
    padding-left: 30px;
}
.li-margin10 {
    margin-right:10px;
}
.panel-chertanovo .badge {
    display: inherit;
}

• Главная
• Блог
• Красиво оформляем разворачивающийся (collapsed) блок...