Как реализовать сollapse bootstrap 4 с категориями (табами)?

Question

[Viktor Burdale]

Здравствуйте. Не знаю как реализовать такую задачу.

Сайт на bootstrap 4, в нем будет раздел "Помощь" с популярными вопросами и ответами. Реализую его с помощью обычного плагина "Collapse" бутстрапа. А теперь сама загвоздка! В разделе есть категории вопросов. Нажимая на ссылку должны отображаться вопросы соответствующей категории и кнопка которая открывает все вопросы. Т.е по сути фильтр строк.

Накидал верстку как должно выглядеть - Ссылка

Или сам код:

<p>
    <span class="btn btn-link" data-toggle="collapse" data-target=".all">
        Все
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter1">
        Фильтр1
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter2">
        Фильтр2
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter3">
         Фильтр3
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter4">
        Фильтр4
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter5">
        Фильтр5
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter6">
         Фильтр6
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter7">
         Фильтр7
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter8">
         Фильтр8
    </span>
    <span class="btn btn-link" data-toggle="collapse" data-target=".fillter9">
         Фильтр9
    </span>  
</p>
<div class="collapse show all fillter1" id="collapse1">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_1">
                    Текст
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_1" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_2">
                   Текст
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_2" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_3">
                   Текст
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_3" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_4">
                  Текст
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_4" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->
</div><!-- .collapse -->
<div class="collapse show all fillter2" id="collapse2">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_fillter2">
                    Текст фильтра 2
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_fillter2" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->
</div><!-- .collapse -->
<div class="collapse show all fillter3" id="collapse3">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <button href="#" class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_fillter3">
                    Текст фильтра 3
                </button>
            </h5>
        </div><!-- .card-header -->

        <div id="collapse_fillter3" class="collapse" data-parent="#accordionExample">
            <div class="card-body">
                Текст
            </div><!-- .card-body -->
        </div>
    </div><!-- .card -->
</div><!-- .collapse -->

Фильтр сделал, но фильтр не переключает контент, а просто открывает соответствующий класс.

Буду благодарен за любую помощь.