Bootstrap Accordion - 一次激活一个 class

Question

I am using Bootstrap's accordion, and I have two different sections with its own content. When I open the page, the active class is at the first element of the first section. But when I go to the "Second" section and I click the one of the list items, the active class still stays at the "First" section. - What I want is: One active class only

 .perNe2-section { padding-top: 0; }.perNe2-section.content-wrapper { margin-bottom: 30px; }.perNe2-section.content-wrapper.title { font-size: 20px; margin-bottom: 20px; }.perNe2-section.per-ne:last-child { margin-bottom: 30px; }.perNe2-section.per-ne.nav-header { color: #fff; font-size: 15px; background: #2c4969; font-weight: bold; padding: 0.5rem 1rem; }.perNe2-section.per-ne.nav-header.cursor-pointer { cursor: pointer; padding-right: 70px; }.perNe2-section.per-ne.nav-header i.fa-caret-down { line-height: 1.5; float: right; }.perNe2-section.per-ne.nav { background: #fff; flex-direction: column; }.perNe2-section.per-ne.nav-tabs { color: red; border-bottom: none; }.perNe2-section.per-ne.nav-tabs a { color: green; }.perNe2-section.per-ne.nav-tabs.names { display: block; padding: 0.5rem 1rem; }.perNe2-section.per-ne.nav-tabs.names:hover { text-decoration: none; }.perNe2-section.per-ne.nav-tabs.names.active { color: green; background: #edeef0; border: none; border-radius: 0; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <section class="perNe2-section"> <div class="container"> <div class="row"> <div class="col-lg-9"> <div class="tab-content"> <div class="tab-pane fade show active" id="perNe" role="tabpanel" aria-labelledby="perNe-tab"> <div class="content-wrapper"> <h2 class="title">Name</h2> <p class="paragraph">Lorem Ipsum</p> </div> </div> <div class="tab-pane fade" id="zv_kryesuesi" role="tabpanel" aria-labelledby="zv_kryesuesi-tab"> <div class="content-wrapper"> <h2 class="title">Zv_Kryesuesi</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="ishKryesuesit" role="tabpanel" aria-labelledby="ishKryesuesit-tab"> <div class="content-wrapper"> <h2 class="title">IshKryesuesit</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="aleksanderLumezi" role="tabpanel" aria-labelledby="aleksanderLumezi-tab"> <div class="content-wrapper"> <h2 class="title">AleksanderLumezi</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="arbenIsmajli" role="tabpanel" aria-labelledby="arbenIsmajli-tab"> <div class="content-wrapper"> <h2 class="title">ArbenIsmajli</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="bedrijeAlshiqi" role="tabpanel" aria-labelledby="bedrijeAlshiqi-tab"> <div class="content-wrapper"> <h2 class="title">BedrijeAlshiqi</h2> <p class="paragraph"></p> </div> </div> </div> </div> <.-- PER NE --> <div class="col-lg-3"> <div class="accordion" id="working_accordion"> <div class="per-ne"> <div class="nav-header" id="headingOne"> <a class="cursor-pointer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">FIRST<i class="fas fa-caret-down"></i></a> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#working_accordion"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li><a class="names active" id="perNe-tab" data-toggle="tab" href="#perNe" role="tab" aria-selected="false"> Per ne </a></li> <li><a class="names" id="zv_kryesuesi-tab" data-toggle="tab" href="#zv_kryesuesi" role="tab" aria-selected="false"> Zv: Kryesuesi </a></li> <li><a class="names" id="ishKryesuesit-tab" data-toggle="tab" href="#ishKryesuesit" role="tab" aria-selected="false"> Ish Kryesuesit </a></li> </ul> </div> </div> <.-- per ne --> <div class="per-ne"> <div class="nav-header" id="headingTwo"> <a class="cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">SECOND<i class="fas fa-caret-down"></i></a> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#working_accordion"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li><a class="names" id="aleksanderLumezi-tab" data-toggle="tab" href="#aleksanderLumezi" role="tab" aria-selected="true"> Aleksander Lumezi </a></li> <li><a class="names" id="arbenIsmajli-tab" data-toggle="tab" href="#arbenIsmajli" role="tab" aria-selected="false"> Arben Ismajli </a></li> <li><a class="names" id="bedrijeAlshiqi-tab" data-toggle="tab" href="#bedrijeAlshiqi" role="tab" aria-selected="false"> Bedrije Alshiqi </a></li> </ul> </div> </div> <.-- per ne 2 --> </div> <.-- accordion --> </div> </div> </div> </section> <script src="https.//code.jquery.com/jquery-3.3:1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1:14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 1

You can remove class active from the relevant hyperlink when one is clicked.

 $(".nav.nav-tabs li a").on("click", function() { $(".nav.nav-tabs li a").removeClass("active"); });

 .perNe2-section { padding-top: 0; }.perNe2-section.content-wrapper { margin-bottom: 30px; }.perNe2-section.content-wrapper.title { font-size: 20px; margin-bottom: 20px; }.perNe2-section.per-ne:last-child { margin-bottom: 30px; }.perNe2-section.per-ne.nav-header { color: #fff; font-size: 15px; background: #2c4969; font-weight: bold; padding: 0.5rem 1rem; }.perNe2-section.per-ne.nav-header.cursor-pointer { cursor: pointer; padding-right: 70px; }.perNe2-section.per-ne.nav-header i.fa-caret-down { line-height: 1.5; float: right; }.perNe2-section.per-ne.nav { background: #fff; flex-direction: column; }.perNe2-section.per-ne.nav-tabs { color: red; border-bottom: none; }.perNe2-section.per-ne.nav-tabs a { color: green; }.perNe2-section.per-ne.nav-tabs.names { display: block; padding: 0.5rem 1rem; }.perNe2-section.per-ne.nav-tabs.names:hover { text-decoration: none; }.perNe2-section.per-ne.nav-tabs.names.active { color: green; background: #edeef0; border: none; border-radius: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <section class="perNe2-section"> <div class="container"> <div class="row"> <div class="col-lg-9"> <div class="tab-content"> <div class="tab-pane fade show active" id="perNe" role="tabpanel" aria-labelledby="perNe-tab"> <div class="content-wrapper"> <h2 class="title">Name</h2> <p class="paragraph">Lorem Ipsum</p> </div> </div> <div class="tab-pane fade" id="zv_kryesuesi" role="tabpanel" aria-labelledby="zv_kryesuesi-tab"> <div class="content-wrapper"> <h2 class="title">Zv_Kryesuesi</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="ishKryesuesit" role="tabpanel" aria-labelledby="ishKryesuesit-tab"> <div class="content-wrapper"> <h2 class="title">IshKryesuesit</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="aleksanderLumezi" role="tabpanel" aria-labelledby="aleksanderLumezi-tab"> <div class="content-wrapper"> <h2 class="title">AleksanderLumezi</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="arbenIsmajli" role="tabpanel" aria-labelledby="arbenIsmajli-tab"> <div class="content-wrapper"> <h2 class="title">ArbenIsmajli</h2> <p class="paragraph"></p> </div> </div> <div class="tab-pane fade" id="bedrijeAlshiqi" role="tabpanel" aria-labelledby="bedrijeAlshiqi-tab"> <div class="content-wrapper"> <h2 class="title">BedrijeAlshiqi</h2> <p class="paragraph"></p> </div> </div> </div> </div> <.-- PER NE --> <div class="col-lg-3"> <div class="accordion" id="working_accordion"> <div class="per-ne"> <div class="nav-header" id="headingOne"> <a class="cursor-pointer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">FIRST<i class="fas fa-caret-down"></i></a> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#working_accordion"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li><a class="names active" id="perNe-tab" data-toggle="tab" href="#perNe" role="tab" aria-selected="false"> Per ne </a></li> <li><a class="names" id="zv_kryesuesi-tab" data-toggle="tab" href="#zv_kryesuesi" role="tab" aria-selected="false"> Zv. Kryesuesi </a></li> <li><a class="names" id="ishKryesuesit-tab" data-toggle="tab" href="#ishKryesuesit" role="tab" aria-selected="false"> Ish Kryesuesit </a></li> </ul> </div> </div> <!-- per ne --> <div class="per-ne"> <div class="nav-header" id="headingTwo"> <a class="cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">SECOND<i class="fas fa-caret-down"></i></a> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#working_accordion"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li><a class="names" id="aleksanderLumezi-tab" data-toggle="tab" href="#aleksanderLumezi" role="tab" aria-selected="true"> Aleksander Lumezi </a></li> <li><a class="names" id="arbenIsmajli-tab" data-toggle="tab" href="#arbenIsmajli" role="tab" aria-selected="false"> Arben Ismajli </a></li> <li><a class="names" id="bedrijeAlshiqi-tab" data-toggle="tab" href="#bedrijeAlshiqi" role="tab" aria-selected="false"> Bedrije Alshiqi </a></li> </ul> </div> </div> <!-- per ne 2 --> </div> <!-- accordion --> </div> </div> </div> </section>