Skip to content Skip to sidebar Skip to footer

Link Button To Another Button

I don't really know how to explain it properly in English but I want to link a button to an action. Example: I have vertical tabs and when you select one of these tabs the relevant

Solution 1:

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


Post a Comment for "Link Button To Another Button"