Tabs with resize

Changing tabs should resize SVG

by Stephane de Luca

HTML

<div class="tabs">
<div onclick="openTab(this)" data-target="traffic" class="is-active">Traffic</div>
<div onclick="openTab(this)" data-target="sales">Sales</div>
</div>

<section id="traffic" class="open-close is-open">
  <h1>Traffic</h1>
  <p>Today, 12.3k</p>
</section>

<section id="sales" class="open-close">
  <h1>Sales</h1>
  <p>Today, €12.3k</p>
</section>

CSS

html {
  font-family: --apple-system, sans-serif;
  font-size: 12pt;
  padding: 1cm;
  background-color: white;
}
.tabs {
 display: flex;
 margin-bottom: .5cm;
}
.tabs>div {
  padding: .5rem;
}
.tabs>div.is-active {
  border-bottom: solid 4px red;
}
.tabs>div:not(.is-active) {
  border-bottom: solid 1px gray;
}

.open-close {
  display: none;
}
.is-open {
  display: block;
}

JavaScript

function openTab(selector) {
	$('.tabs>div').removeClass('is-active');
  $(selector).addClass('is-active');
  var target = $(selector).attr('data-target');
	$(target).addClass('is-open'); 
}