Bootstrap Accordion, не скрываются другие вкладки

445

24 ноября 2016, 10:18

Доброго времени суток.

Проблема вот в чём:

Есть 2 примера: https://jsfiddle.net/0yydm9x0/1/

<body>
  <h1>Пример №1</h1>
    <div id="accordion-777" class="panel-group" aria-multiselectable="true" role="tablist">
        <div class="panel panel-default row">
            <div class="panel-heading col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tab">
                <div class="panel-title"><a href="#accordion-777 .item-1" role="button" data-toggle="collapse" data-parent="#accordion-777" aria-expanded="true">Кнопка 1</a></div>
            </div>
            <div class="panel-collapse collapse item-1 col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 1</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default row">
            <div class="panel-heading col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tab">
                <div class="panel-title"><a href="#accordion-777 .item-2" role="button" data-toggle="collapse" data-parent="#accordion-777" aria-expanded="false">Кнопка 2</a></div>
            </div>
            <div class="panel-collapse collapse item-2 col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 2</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default row">
            <div class="panel-heading col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tab">
                <div class="panel-title"><a href="#accordion-777 .item-3" role="button" data-toggle="collapse" data-parent="#accordion-777" aria-expanded="false">Кнопка 3</a></div>
            </div>
            <div class="panel-collapse collapse item-3 col-lg-3 col-md-3 col-sm-3 col-xs-3" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 3</p>
                </div>
            </div>
        </div>
    </div>
    <br>
    <h1>Пример №2</h1>
    <div id="accordion-799" class="panel-group" aria-multiselectable="true" role="tablist">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 panel-heading">
            <div class="list-group">
                <div class="list-group-item" role="tab"><a href="#accordion-799 .item-1" role="button" data-toggle="collapse" data-parent="#accordion-799" aria-expanded="false">Кнопка 1</a></div>
            </div>
            <div class="list-group">
                <div class="list-group-item" role="tab"><a href="#accordion-799 .item-2" role="button" data-toggle="collapse" data-parent="#accordion-799" aria-expanded="false">Кнопка 2</a></div>
            </div>
            <div class="list-group">
                <div class="list-group-item" role="tab"><a href="#accordion-799 .item-3" role="button" data-toggle="collapse" data-parent="#accordion-799" aria-expanded="false">Кнопка 3</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 panel-collapse">
            <div class="collapse item-1" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 1</p>
                </div>
            </div>
            <div class="collapse item-2" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 2</p>
                </div>
            </div>
            <div class="collapse item-3" role="tabpanel">
                <div class="panel-body">
                    <p>Контент 3</p>
                </div>
            </div>
        </div>
    </div>
</body>

Нужно сделать рабочий макет, как во втором примере, но чтобы при выборе определённой вкладки, другие сворачивались (как в примере №1), и новый контент появлялся сверху (как во втором примере №2). Если это вообще возможно сделать.

В чём может быть ошибка?

С бутстрапом, как и с вебом в целом работаю недавно, так что не пинайте, пожалуйста.