You can turn your buttons into labels and then use a radio to show the corresponding tab:
.radio,
.content {
display: none;
}
.radio:checked+.content {
display: block;
}
<div class="vertical-tabs">
<ul class="tabs vertical" data-tab="">
<li class="tab-title active"><label for="panel1-radio">Tab 1</a></li>
<li class="tab-title"><label for="panel2-radio">Tab 2</a></li>
</ul>
<div class="tabs-content">
<input type="radio" name="show-panel" id="panel1-radio" class="radio" checked>
<div class="content" id="panela1" aria-hidden="false">
<p>This is tab 1</p>
<label for="panel2-radio">Click to show Tab2</label>
</div>
<input type="radio" name="show-panel" id="panel2-radio" class="radio">
<div class="content" id="panelb1" aria-hidden="false">
<p>This is tab 2</p>
</div>
</div>
If you are wanting to highlight the tabs in the list, you are going to have to add a bit of js to add and remove classes bases on the selected checkbox
4
solved Link button to another button [closed]