<!--
image: https://unsplash.com/photos/Q-3KocSpF0I
-->
<div class="container--tabs">
	<section class="row">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tab-1">Original (482KB)</a></li>
			<li class=""><a href="#tab-2">JPEG (q50, 45KB)</a></li>
			<li class=""><a href="#tab-3">WebP (q54, 45KB)</a></li>
      <li class=""><a href="#tab-4">AVIF (q36, 45KB)</a></li>
		</ul>
		<div class="tab-content">
			<div id="tab-1" class="tab-pane active"> 
				<span class="glyphicon glyphicon-leaf glyphicon--home--feature two columns text-center"></span>
				<span class="col-md-10">
					<img 
         src="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081600/smashing-articles/drilldown.jpg"
               width="100%"
               alt="Original"/>
				</span>
			</div> 
			<div id="tab-2" class="tab-pane">
				<span class="glyphicon glyphicon-fire glyphicon--home--feature two columns text-center"></span>
				<span class="col-md-10">
					<img 
         src="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081478/smashing-articles/q50drilldown.jpg"
               width="100%"
               alt="Original"/>
				</span>
			</div>
			<div id="tab-3" class="tab-pane">
				<span class="glyphicon glyphicon-tint glyphicon--home--feature two columns text-center"></span>
				<span class="col-md-10">
					<img 
         src="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081526/smashing-articles/q54drilldown.webp"
               width="100%"
               alt="Original"/>
				</span>
			</div>
      
 			<div id="tab-4" class="tab-pane">
				<span class="glyphicon glyphicon-tint glyphicon--home--feature two columns text-center"></span>
				<span class="col-md-10">
          
  <picture>
  <source srcset="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081562/smashing-articles/q36drilldown.avif" type="image/avif">
  <source srcset="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081562/smashing-articles/q36drilldown.png">
 <img 
         src="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632081562/smashing-articles/q36drilldown.png"
               width="100%"
               alt="Original"/>
</picture>        
          
				</span>
			</div>
      
      
		</div>
	</section>
</div>

.container--tabs {
	margin: 2rem;

	.nav-tabs {
		float: left;
		width: 100%;
		margin: 0;
    font-weight: bold;
		list-style-type: none;
		border-bottom: 1px solid #ddd;

		> li {
			float: left;
			margin-bottom: -1px;

			> a {
				float: left;
				margin-right: 2px;
				line-height: 1.42857143;
				padding: 10px;
				border: 1px solid transparent;
        text-decoration: none;
				border-radius: 4px 4px 0 0;

				&:hover {
					border-color: #eee #eee #ddd;
				}
			}

			&.active {
				> a,
				> a:hover,
				> a:focus {
					color: #555;
					cursor: default;
					background-color: #fff;
					border: 1px solid #ddd;
					border-bottom-color: transparent;
				}
			}
		}
	}

	.tab-content {
		float: left;
		width: 100%;

		> .tab-pane {
			display: none;
      

			&.active {
				display: block;
				// padding: 2.5% 3.5%;
				background-color: #efefef;
			}
		}

		> .active {
			display: block;
		}
	}

}

window.addEventListener("load", function() {
	// store tabs variable
	var myTabs = document.querySelectorAll("ul.nav-tabs > li");
  function myTabClicks(tabClickEvent) {
		for (var i = 0; i < myTabs.length; i++) {
			myTabs[i].classList.remove("active");
		}
		var clickedTab = tabClickEvent.currentTarget;
		clickedTab.classList.add("active");
		tabClickEvent.preventDefault();
		var myContentPanes = document.querySelectorAll(".tab-pane");
		for (i = 0; i < myContentPanes.length; i++) {
			myContentPanes[i].classList.remove("active");
		}
		var anchorReference = tabClickEvent.target;
		var activePaneId = anchorReference.getAttribute("href");
		var activePane = document.querySelector(activePaneId);
		activePane.classList.add("active");
	}
	for (i = 0; i < myTabs.length; i++) {
		myTabs[i].addEventListener("click", myTabClicks)
	}
});