选项卡式导航栏中的手风琴Bootstrap4

Question

I'm really new to bootstrap and as I was getting the hang of it as it is easy to use, I started creating a webpage in which people can navigate easily.

I was using bootstrap to put inside an accordion inside a navbar to navigate easier. The thing is, while the first tab and accordion work properly, as I navigate to the other tabs and interact with the other accordions, they don't work properly.

When you click any of the cards in the first accordion, you can see that the other closes, but when you try that in the others, the cards are always displayed, I don't know what it could be.

I checked the names for the data-target, the data-toggle, as well as the aria-labelledby and the classes, but still couldn't find the detail, I don't know if it's because of the divs, as I insert a div with class accordion in every tab-pane.

    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
             aria-selected="true">1. Introducción</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile"
             aria-selected="false">2. Síntomas de la DMRE húmeda</a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact"
             aria-selected="false">3. Factores de riesgo</a>
        </div>
    </nav>

    <div class="tab-content" id="nav-tabContent">

        <!--Primera seccion, INTRODUCCION-->
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <div class="accordion" id="accordion" style="width: 100%">

                <div class="card">
                    <div class="card-header" id="headingOneOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne">
                                <h1 style="display: inline-block;">1.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOneOne" class="collapse show" aria-labelledby="headingOneOne" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingOneTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOneTwo" aria-expanded="false"
                             aria-controls="collapseOneTwo">
                                <h1 style="display: inline-block;">1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOneTwo" class="collapse" aria-labelledby="headingOneTwo" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--Segunda seccion, Sintomas-->
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            <div class="accordion" id="accordion" style="width: 100%">

                <div class="card">
                    <div class="card-header" id="headingTwoOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwoOne" aria-expanded="true" aria-controls="collapseTwoOne">
                                <h1 style="display: inline-block;">2.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">
                                    Síntomas de la descripción de la DMRE húmeda</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwoOne" class="collapse show" aria-labelledby="headingTwoOne" data-parent="#accordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
                            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                            labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwoTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwoTwo" aria-expanded="false"
                             aria-controls="collapseTwoTwo">
                                <h1 style="display: inline-block;">2.2</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwoTwo" class="collapse" aria-labelledby="headingTwoTwo" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--Tercera seccion, Factores de riesgo-->
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="accordion" id="accordion" style="width: 100%">
                <div class="card">
                    <div class="card-header" id="headingThreeOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <h1 style="display: inline-block;">3.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingThreeOne" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                             aria-controls="collapseThree">
                                <h1 style="display: inline-block;">3</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Factores de riesgo</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
                            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
                            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                            labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here's also my code in fiddle so you can have a better view about it.

Answer 1

@git-e-up is correct. You need unique id's for each accordion group. For example:

<div class="accordion" id="accordion1">

Check this updated Fiddle