JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div class="rog-shortcut">
  <nav>
    <div class="rog-shortcut__nav" id="nav-tab" role="tablist">
      <a class="rog-shortcut__nav-item" id="nav-favoriter-tab" data-toggle="tab" href="#nav-favoriter" role="tab" aria-controls="nav-home" aria-selected="false">Favoriter</a>
      <a class="rog-shortcut__nav-item" id="nav-applikationer-tab" data-toggle="tab" href="#nav-applikationer" role="tab" aria-controls="nav-profile" aria-selected="false">Applikationer</a>
      <a class="rog-shortcut__nav-item" id="nav-dokument-tab" data-toggle="tab" href="#nav-dokument" role="tab" aria-controls="nav-contact" aria-selected="false">Dokument</a>
      <a class="rog-shortcut__nav-item" id="nav-kontakter-tab" data-toggle="tab" href="#nav-kontakter" role="tab" aria-controls="nav-about" aria-selected="false">Kontakter</a>
      <a class="rog-shortcut__nav-item" id="nav-grupper-tab" data-toggle="tab" href="#nav-grupper" role="tab" aria-controls="nav-about" aria-selected="false">Grupper</a>
      <a class="rog-shortcut__nav-item" id="nav-taggar-tab" data-toggle="tab" href="#nav-taggar" role="tab" aria-controls="nav-about" aria-selected="false">Taggar</a>
    </div>
  </nav>
  <div class="rog-shortcut__tab-content">
    <div class="rog-shortcut__tab-pane" id="nav-favoriter" role="tabpanel" aria-labelledby="nav-home-tab">
      <ul>
        <li><a href="#">RETTS och processåtgärder</a></li>
        <li><a href="#">Läkarscheman akutkliniken</a></li>
        <li><a href="#">Reservrutiner Cosmic</a></li>
        <li><a href="#">RETTS och processåtgärder</a></li>
        <li><a href="#">Läkarscheman akutkliniken</a></li>
        <li><a href="#">Reservrutiner Cosmic</a></li>
      </ul>
      <div class="rog-shortcut__tab-footer">
        <a href="#">Gå till Taggar</a>
        <button class="rog-shortcut__btn-close">Stäng</button>
      </div>
    </div>
    <div class="rog-shortcut__tab-pane" id="nav-applikationer" role="tabpanel" aria-labelledby="nav-profile-tab">
      <ul>
       ...

CSS

.rog-shortcut__tab-pane {
  display: none;
}

.rog-shortcut__nav-item {
  text-transform: uppercase;
  padding: 10px;
}


.rog-shortcut__tab-pane ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

.rog-shortcut__tab-footer a {
  text-transform: uppercase;
  padding: 10px;
}
.rog-shortcut__tab-footer .rog-shortcut__btn-close {
  color: #5f4b8b;
}

JavaScript

$('.rog-shortcut a').click(function() {
  $(this).attr('aria-selected', 'true').siblings().attr('aria-selected', 'false');
  var id = $(this).attr('href');
  $(id).toggle().siblings().hide();
});