JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-6 row" id="args">
<div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
<a class="nav-link active" href="#v-pills-0" data-toggle="pill" role="tab"
aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
"spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link" href=
"#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
aria-expanded="false">Cafetería Rolando bombing<span class=
"spaceTimeInfo">Spain, 13 September 1974</span></a>
</div>
<div class="col-8" id="horMenu">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" aria-labelledby="v-pills-0" id=
"v-pills-0">
<ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab0">
<li class="nav-item"><a class="nav-link active" href="#pills-0"
data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
"pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
"pill" role="tab" aria-controls="pills-0">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show"...
JavaScript
$(".nav-link").click(function(){
var me = $(this);
var panel = $('#' + this.hash.substr(1).toLowerCase());
if(me.hasClass('active')){
me.removeClass('active');
panel.removeClass('active');
return false;
}
});