Collapsible Bootstrap tabs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
	<main id="panel-container">
		<section id="panel-menu">
    
      <!-- Nav tabs -->
      <ul class="nav nav-tabs">
        <li><a href="#panel-search" data-toggle="tab" data-parent="#panel-container" data-target="#panel-search"><i class="fa fa-fw fa-lg fa-search"></i></a></li>
        <li><a href="#panel-edit" data-toggle="tab" data-parent="#panel-container" data-target="#panel-edit"><i class="fa fa-fw fa-lg fa-edit"></i></a></li>
        <li><a href="#panel-layer" data-toggle="tab" data-parent="#panel-container" data-target="#panel-layer"><i class="fa fa-fw fa-lg fa-map-o"></i></a></li>
        <li><a href="#panel-settings" data-toggle="tab" data-parent="#panel-container" data-target="#panel-settings"><i class="fa fa-fw fa-lg fa-cog"></i></a></li>
        <li class="spacer"></li>
        <li><a href="#panel-help" data-toggle="tab" data-parent="#panel-container" data-target="#panel-help" class="blue-menu"><i class="fa fa-fw fa-lg fa-question-circle-o"></i></a></li>
      </ul>
    </section>

		<section id="panel-content" class="tab-content">
			<!-- Tab panes -->
			<div class="tab-pane fade" id="panel-search"><div class="content">Search</div></div>
			<div class="tab-pane fade" id="panel-edit"><div class="content">Edit</div></div>
			<div class="tab-pane fade" id="panel-layer"><div class="content">Layer</div></div>
			<div class="tab-pane fade" id="panel-settings"><div class="content">Settings</div></div>
			<div class="tab-pane fade" id="panel-help"><div class="content">Help</div></div>
		</section>

		<section id="panel-map">
			<div id="map">1234</div>
		</section>
	</main>

CSS

/* MAIN */
#panel-container {
  height: 100%;
	background-color: #ffffff;

	/* Container FlexBox */
	display: flex;
	flex-direction: row;
}




/* MENU */
#panel-menu {
	/* Item FlexBox */
	flex: 0 0 50px;
	background: #323642;
	
	/* Container FlexBox */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#panel-menu > ul {
	/* Déclare hauteur du menu */
	height: 100%;
	/* Enlever le border-bottom: 1px; */
	border: 0px;

	/* Container FlexBox */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#panel-menu > ul > li {
	/* Item flex par défaut */
	flex: 0;
}
#panel-menu > ul > li.spacer {
	/* Item flex 'spacer' pour écarter les groupes d'icones */
	flex: 1;
}

#panel-menu > ul > li {
	/* Enlever le margin-bottom : -1px */
	margin: 0px;
}


#panel-menu > ul > li > a {
	/* Enlever le margin-right:2px; */
	margin: 0px;
	/* Positionner l'icone dans le A pour avoir un A carré */
	padding: 20px 18px;
	/* Enlever les styles de tabulation par défaut */
	border: 0px;
	border-radius: 0px;

	color: #ffffff;
  background-color: #323642;
}
#panel-menu > ul > li > a.blue-menu {
	color: #ffffff;
	background-color: #219ce4;
}


#panel-menu > ul > li > a:hover {
	color: #ffffff;
	background-color: #3c404e;
}
#panel-menu > ul > li > a.blue-menu:hover {
	color: #ffffff;
	background-color: #56c2ee;
}

#panel-menu > ul > li.active > a,
#panel-menu > ul > li.active > a:hover,
#panel-menu > ul > li.active > a:focus {
	color:#232c32;
	background: #dadfe5;
}
#panel-menu > ul > li.active > a.blue-menu,
#panel-menu > ul > li.active > a.blue-menu:hover,
#panel-menu > ul > li.active > a.blue-menu:focus {
	color:#219ce4;
	background: #dadfe5;
}


/* CONTENT */
.tab-pane {
	height: 100%;
	overflow-y: auto;
	background: #dadfe5;
}
.content {
	/* Fixer la largeur des slides de contenu */
	width: 400px;
	/* Impose un padding aux slides */
	padding: 15px;
}


#panel-map {
  background-color: lightblue;
	flex: 1 1 auto;
}

JavaScript

$('[data-toggle=tab]').click(function(e){
	if($(this).parent().hasClass('active')){
  
		e.preventDefault();
    e.stopPropagation();
    
		$(this).parent().removeClass('active');
    
		$($(this).attr("href")).removeClass('active');
		$($(this).attr("href")).removeClass('in');
    
		$(this).attr("aria-expanded", false);
	}
})