Как открыть одну вкладку аккордеона одновременно - PullRequest
Новая
       32

Как открыть одну вкладку аккордеона одновременно

0 голосов
/ 01 сентября 2018

У меня проблемы с попыткой получить его, поэтому в моей форме аккордеонного стиля Bootstrap открыта только одна вкладка за шаг. Что мне нужно изменить, чтобы одновременно открывать только одну вкладку?

Вот ссылка CodePen на полную версию. Вот часть моего HTML: 

<div id="accordion" role="tablist" aria-multiselectable="false">
<div class="card">
    <div class="card-header" role="tab" id="headingOne">
        <div class="mb-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                <h3>Step 1 of 4: Create Profile</h3>
                <div class="edit-step">Edit Step</div>
            </a>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style="">
        <div class="card-block">
            <form>
                <h1>Organization</h1>
                <label>Membership Category</label>
                <select id="category">
                    <option value=""></option>
                    <option value="CM">Company</option>
                    <option value="NS">Educational</option>
                    <option value="GM">Government</option>
                    <option value="OM">Organizational</option>
                    <option value="IND">Individual</option>
                    <option value="RET">Retail</option>
                </select><br><br>
                <div id="continue1" class="continue-button">Continue</div><br>
            </form>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" role="tab" id="headingTwo">
        <div class="mb-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                <h3>Step 2 of 4: Payment Information</h3>
                <div class="edit-step">Edit Step</div>
            </a>
        </div>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false">
        <div class="card-block">
            <form>
                <h1>Organization</h1>
                <br><br>
                <div id="continue2" class="continue-button">Continue</div><br>
            </form>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 01 сентября 2018

Поскольку вы уже используете jQuery в своем проекте, вы можете просто выбрать все элементы div с классом panel-collapse collapse in и удалить класс in

Codepen: https://codepen.io/anon/pen/yxMyqY

$(document).ready(function(){
    $("[data-parent='#accordion']").on("click", function(){
        var trigger = $(this);
        $(".panel-collapse.collapse.in").each(function(){
            if( trigger.attr("href") != ("#"+$(this).attr("id")) ){
            $(this).removeClass("in");
            } // condition returns false on iteration on div to be opened
        });   
    });
});
...