Я использую аккордеон Bootstrap, и у меня есть два разных раздела с собственным контентом.Когда я открываю страницу, активный класс находится на первом элементе первого раздела.Но когда я перехожу в раздел «Второй» и щелкаю один из элементов списка, активный класс по-прежнему остается в разделе «Первый».- Что я хочу, это: только один активный класс
.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>