I'm trying to create navigation using Bootstrap 5, so that I have 3 columns of content. The first column contains a nav-list. The second column contains an additional nav-list, and in the third column items are shown to correspond with the active item of the second column list. Ultimately, the overall nav will be dropped into a megamenu, and would ideally be interacted entirely by mouseovers, not clicks.
I've put together a pen here:
https://codepen.io/phil303/pen/yLxbzWj
<div class="container py-8 text-center">
<div class="row">
<div class="col-4">
<!-- First Column List -->
<ul class="nav nav-tabs nav-tabs-basic flex-column">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#first-1-1">First Col #1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#first-1-2">First Col #2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#first-1-3">First Col #3</a>
</li>
</ul><!-- /.nav-tabs -->
</div>
<div class="col-4">
<!-- Middle Column List -->
<div class="tab-content mt-0">
<div class="tab-pane fade show active" id="first-1-1">
<ul class="nav nav-tabs nav-tabs-basic flex-column">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#middle-1-1">Middle Col #1_1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-1-2">Middle Col #1_2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-1-3">Middle Col #1_3</a>
</li>
</ul><!-- /.nav-tabs -->
</div><!--/.tab-pane -->
<div class="tab-pane fade" id="first-1-2">
<ul class="nav nav-tabs nav-tabs-basic flex-column">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#middle-2-1">Middle Col #2_1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-2-2">Middle Col #2_2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-2-3">Middle Col #2_3</a>
</li>
</ul><!-- /.nav-tabs -->
</div><!--/.tab-pane -->
<div class="tab-pane fade" id="first-1-3">
<ul class="nav nav-tabs nav-tabs-basic flex-column">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#middle-3-1">Middle Col #3_1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-3-2">Middle Col #3_2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#middle-3-3">Middle Col #3_3</a>
</li>
</ul><!-- /.nav-tabs -->
</div><!--/.tab-pane -->
</div><!-- /.tab-content -->
</div><!--/column -->
<div class="col-4">
<!-- Last Column Items -->
<div class="tab-content mt-0">
<div class="tab-pane fade show active" id="middle-1-1">
<p>Last Col #1_1_1</p>
</div>
<div class="tab-pane fade" id="middle-1-2">
<p>Last Col #1_2_1</p>
</div>
<div class="tab-pane fade" id="middle-1-3">
<p>Last Col #1_3_1</p>
</div>
<div class="tab-pane fade" id="middle-2-1">
<p>Last Col #2_1_1</p>
</div>
<div class="tab-pane fade" id="middle-2-2">
<p>Last Col #2_2_1</p>
</div>
<div class="tab-pane fade" id="middle-2-3">
<p>Last Col #2_3_1</p>
</div>
<div class="tab-pane fade" id="middle-3-1">
<p>Last Col #3_1_1</p>
</div>
<div class="tab-pane fade" id="middle-3-2">
<p>Last Col #3_2_1</p>
</div>
<div class="tab-pane fade" id="middle-3-3">
<p>Last Col #3_3_1</p>
</div>
</div><!-- /.tab-content -->
</div><!--/column -->
</div><!--/row -->
</div><!--/container -->
It's working, except when I try to add the content for the second and third list items in the first column (e.g. First Col #2 > Middle Col #2_1). If I simply add these with the first list items, when these are clicked, they are added beneath the first list items (within the last column).
I presume that I need script to hide the active items in the last column, when user clicks on another item within the list. I've had a look at the docs but my JS is just too weak to even know where to begin.
Any help on this greatly appreciated - even if you can just point me in the right direction would be wonderful. Thanks
