I'm trying to create two tabs containers one of them are used to describe the content of a set of files and the second are used as a list of download links for the described files.

now what I did is try to control the two containers using one tab only, I saw a solution used {data-trigger} with two ID's like data-trigger="#TabA1, #TabB1" but it seems this option is not working with bootstrap 4.x, so is there any solution or workaround to solve this issue.

anyway here is my code, if anyone can help me in this.

<div class="row">

<div class="col-sm-8">

<div class="card text-center ">

<div class="card-header">

<ul class="nav nav-tabs card-header-tabs">

<li class="nav-item">

<a class="nav-link active" href="#TabA1" data-trigger="#A1, #B1" data-toggle="tab" role="tab" aria-selected="true">A1/B1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#TabA2" data-trigger="#A2, #B2" data-toggle="tab" role="tab" aria-selected="false">A2/B2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#TabA3" data-trigger="#A3, #B3" data-toggle="tab" role="tab" aria-selected="false">A3/B3</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#TabA4" data-trigger="#A4, #B4" data-toggle="tab" role="tab" aria-selected="false">A4/B4</a>

</li>

</ul>

</div>

<div class="card-body" style="text-align: left; overflow-y: scroll; max-height: 600px;">

<div class="tab-content" id="myTabContent_A">

<div class="tab-pane fade show active" id="TabA1" role="tabpanel">

A1

</div>

<div class="tab-pane fade" id="TabA2" role="tabpanel">

A2

</div>

<div class="tab-pane fade" id="TabA3" role="tabpanel">

A3

</div>

<div class="tab-pane fade" id="TabA4" role="tabpanel">

A4

</div>

</div>

</div>

</div>

</div>

<div class="col-sm-4">

<div class="card">

<h5 class="card-header">Files</h5>

<div class="card-body">

<h5 class="card-title"></h5>

<div class="tab-content" id="myTabContent_B">

<div class="tab-pane fade show active" id="TabB1" role="tabpanel">

B1

</div>

<div class="tab-pane fade" id="TabB2" role="tabpanel">

B2

</div>

<div class="tab-pane fade" id="TabB3" role="tabpanel">

B3

</div>

<div class="tab-pane fade" id="TabB4" role="tabpanel">

B4

</div>

</div>

</div>

</div>

</div>

</div>

with the mentioned HTML code only I can see changes happened to the first tabs container. but I expected to see the changes happened in both of the containers A and B.

see the demo: https://www.bootply.com/yZ7wFkfiMj