Bootstrap 4 responsive tabs en móvil

<main class="site-main" id="main">
	<div class="w-100 bg-light border-bottom">
		<div class="container py-5">
			<div class="grid-90 prefix-5 mobile-grid">
				<div class="tab-list">
					<span>Registro para<span></span></span>
					<ul class="nav nav-tabs">
						<li class="selected"><span><a aria-controls="nav-home" aria-selected="true" class="nav-item nav-link active" data-target="#nav-trabajador" data-toggle="tab" id="nav-trabajador-tab" role="tab" target="1">Trabajador protegido</a></span></li>
						<li style="list-style: none"><span></span></li>
						<li><span><a aria-controls="nav-profile" aria-selected="false" class="nav-item nav-link" data-target="#nav-empresa" data-toggle="tab" id="nav-empresa-tab" role="tab" target="2">Empresa o asesor laboral</a></span></li>
					</ul>
				</div>
				<div class="tab-content" id="nav-tabContent">
					<span></span>
					<div aria-labelledby="nav-trabajador-tab" class="tab-pane fade show active" id="nav-trabajador" role="tabpanel">
						<span></span>
						<div class="bg-light">
							<span></span>
							<h2><span>trabajador</span></h2>
						</div>
					</div>
					<div aria-labelledby="nav-empresa-tab" class="tab-pane fade" id="nav-empresa" role="tabpanel">
						<span></span>
						<div class="bg-light">
							<span></span>
							<h2><span>empresa</span></h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
.tab-list a.active:before {
	border-top: 0;
	border-right: 1em solid transparent;
	border-bottom: 1em solid #000;
	border-left: 1em solid transparent;
	margin: 0 0 0 -1em;
	top: auto;
	right: auto;
	bottom: -2px;
	left: 50%;
}
.tab-list a.active {
	color: #000;
	background: #8cc1c1;
	position: relative;
}
.tab-list ul {
	color: #fff;
	background: #6d6e70;
	padding: 3.5em 0 0;
	margin: 0;
	list-style: none;
	position: relative;
}
@media screen and (max-width: 800px) {
	.tab-list a {
		padding: 1em;
		display: block;
	}
	.tab-list.expanded li {
		display: list-item;
		
	}
	.tab-list li {
		display: none;
	}
	.tab-list li.selected {
		
		color: #fff;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
	.tab-list a.active {
		color: #000;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
	.tab-list a.active:before {
		width: 0;
		height: 0;
		content: '';
		border-top: 4px solid #bf1b1b;
		border-right: 4px solid transparent;
		border-bottom: 0;
		border-left: 4px solid transparent;
		margin-top: -2px;
		position: absolute;
		top: 50%;
		right: 1em;
	}
}
Query(document).ready(function($) {
	
	$(".nav-tabs > li > a").click(function() {
		$(".tab-list").toggleClass("expanded");
		$(".nav-tabs > li").removeClass('selected');
		if ($(".nav-tabs > li > a").hasClass('active')) {
			$(this).parent().addClass('selected')
		}
	});
});

Deja un comentario