Open Tabs via multiple IDs

Trying to solve a URL parameter to a section id, then open a tab and it's content based on that ID.

by Thomas Orthbandt

HTML

<!--<article class="pushDown"></article>-->

<article id="features">
	<div class="tab-wrapper">
		<ul class="tab-wrapper__tab-list" role="tablist">
			<li role="presentation">
				<a href="#tab1" role="tab" aria-controls="panel0">Tab One</a>
			</li>
			<li role="presentation">
				<a href="#tab2" role="tab" aria-controls="panel1">Tab Two</a>
			</li>
			<li role="presentation">
				<a href="#tab3" role="tab" aria-controls="panel2">Tab Three</a>
			</li>
		</ul>

		<div id="tab1" class="tab-wrapper__tab" role="tabpanel">
			<div class="tab-wrapper__content-wrapper">
				<p>Lorem ipsum dolor sit amet, nam an purto autem contentiones. Cum solet verear petentium ut, an incorrupte interesset sit, eu sea dicant suscipit definiebas. Ut illum habemus sententiae sea, nec nibh accusata an. Tempor dissentias ea nam. Utinam volutpat sed at, dicta errem cu est.</p>
			</div>
		</div>

		<div id="tab2" class="tab-wrapper__tab" role="tabpanel">
			<div class="tab-wrapper__content-wrapper">
				<p>Vel zril putent incorrupte ei. Cu tation veniam euripidis vel, diceret minimum deserunt an ius. Eam ex probatus laboramus, cum ad noluisse suscipit, everti accusata id eam. Ius et commune recusabo, id munere alterum mei. Rebum oratio malorum usu te, no feugait inciderint eos. Eum viderer deseruisse instructior at. Nusquam expetenda eam et.</p>
			</div>
		</div>

		<div id="tab3" class="tab-wrapper__tab" role="tabpanel">
			<div class="tab-wrapper__content-wrapper">
				<p>Tacimates consetetur his eu. Amet persecuti an eum, ne facete audiam mei. Pri et alia urbanitas, dicunt tacimates eos eu. Ut sit inani urbanitas. Has in equidem atomorum accommodare. Te vim decore cetero intellegebat. Saepe timeam posidonium pro te, nulla insolens adipisci ne vis.</p>
			</div>
		</div>
	</div>
</article>

CSS

.tab-wrapper__tab-list {
	text-align: center;
    margin-bottom: -1px;
}

.tab-wrapper__tab-list li:not(:last-child) {
    margin-right: .625rem;
}

.tab-wrapper__tab-list li {
    display: inline-block;
}

.tab-wrapper__tab-list a {
    display: block;
    padding: 1.25rem 1.875rem;
    line-height: 1;
    font-size: .875em;
    color: #aeaeae;
    text-decoration: underline;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.tab-wrapper {
    width: 92%;
    max-width: 960px;
    margin: 0 auto;
}

.tab-wrapper__tab-list a:hover  {
    background: #f8f8f8;
}

.tab-wrapper__tab-list li.active {
    border-top-color: #dfdfdf;
    border-left-color: #dfdfdf;
    border-right-color: #dfdfdf;
    background-color: #f8f8f8;
    color: #1c1c1c;
    text-decoration: none;
}

.pushDown {
	height: 100px;
}

JavaScript

$(function () {

    $(".tab-wrapper__tab").hide().first().show();
    $(".tab-wrapper__tab-list li:first").addClass("active");

    $(".tab-wrapper__tab-list a").on('click', function (e) {
        e.preventDefault();
        $(this).closest('li').addClass("active").siblings().removeClass("active");
        $($(this).attr('href')).show().siblings('.tab-wrapper__tab').hide();
    });

    var hash = $.trim(window.location.hash);

    if (hash) $('.tab-wrapper__tab-list a[href$="'+ hash +'"]').trigger('click');
});