<!--
image: https://unsplash.com/photos/DA_tplYgTow
-->
<div class="container--tabs">
	<section class="row">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tab-1">Original</a></li>
			<li class=""><a href="#tab-2">JPEG</a></li>
			<li class=""><a href="#tab-3">WebP</a></li>
      <li class=""><a href="#tab-4">AVIF</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/v1632192059/smashing-articles/ayousef-espanioly-DA_tplYgTow-unsplash.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/v1632192016/smashing-articles/289-jpeg-ayousef-espanioly-DA_tplYgTow-unsplash.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/v1632192015/smashing-articles/206-webp-ayousef-espanioly-DA_tplYgTow-unsplash.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/v1632192015/smashing-articles/101-avif-ayousef-espanioly-DA_tplYgTow-unsplash.avif" type="image/avif">
                        <source srcset="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632192015/smashing-articles/101-avif-ayousef-espanioly-DA_tplYgTow-unsplash.png">
					<img 
         src="https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632192015/smashing-articles/101-avif-ayousef-espanioly-DA_tplYgTow-unsplash.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)
	}
});