I have a page with 2 tabs.
I want the pills-public
tab to display :
PUBLIC BLOCK 1
I want the pills-private
tab to display :
PRIVATE BLOCK 2
PRIVATE BLOCK 1
Note that the 2 PRIVATE content is not in the same region.
How to do this ? The code below does not work.
https://codepen.io/anon/pen/JqwJQd
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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">
<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>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVATE</a>
</li>
</ul>
<div class="region-top">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 2</div>
</div>
</div>
<div class="region-bottom">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">PUBLIC BLOCK 1</div>
<div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 1</div>
</div>
</div>
<!-- end snippet -->
Comments
Try this variant:
Try this variation: