Hello Content! (A Tabbing Script)

<style>
	/* Hello Content! by Memoria at The Initiative.
	   Last updated 07.22.18.
	   Please do not remove credits! */

	/* Hello Content! - Overall Styles */
	.hc-tabs-wrapper, .hc-tabs-wrapper * {
		box-sizing: border-box;
	}
	.hc-tabs-wrapper .hc-tabs {
		border-bottom: 1px solid #999999;
	}
	.hc-tabs-wrapper .hc-tabs-list {
		list-style: none;
		margin: 0 -2.5px -1px -2.5px;
		padding: 0;
	}
	.hc-tabs-wrapper .hc-tabs-list:before, .hc-tabs-wrapper .hc-tabs-list:after {
		content: '';
		display: table;
		zoom: 1;
	}
	.hc-tabs-wrapper .hc-tabs-list:after {
		clear: both;
	}
	.hc-tabs-wrapper .hc-tabs-list li {
		float: left;
		width: 20%;	/* Width = 100 / Number of tabs */
		padding: 0 2.5px;
	}
	.hc-tabs-wrapper .hc-tabs-list li span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border: 1px solid #999999;
		background: #999999;
		color: #333333;
		cursor: pointer;
		padding: 2.5px 10px;
		border-radius: 3px 3px 0 0;
	}
	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active {
		font-weight: bold;
	}
	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active span {
		background: #ffffff;
		color: #999999;
	}
	.hc-tabs-wrapper .hc-content-block {
		position: absolute;
		top: -9999px;
		left: -9999px;
		z-index: -1;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
	}
	.hc-tabs-wrapper .hc-content-block.hc-tab-show {
		position: static;
		visibility: visible;
		opacity: 1;
	}

	/* Hello Content! - Responsive */
	@media only screen and (max-width: 540px) {
		.hc-tabs-wrapper .hc-tabs-list li {
			width: auto;
			float: none;
		}
		.hc-tabs-wrapper .hc-tabs-list li:first-child ~ li span {
			border-radius: 0;
		}
		.hc-tabs-wrapper .hc-tabs-list li span {
			border-bottom-color: #a3a3a3;
		}
	}
</style>
<!-- To another tab set, copy a hc-tabs-wrapper element and the contents inside -->
<div class="hc-tabs-wrapper">
	<div class="hc-tabs">
		<ul class="hc-tabs-list">
			<li class="hc-tab-active">
				<span data-tab="hc-tab01">Tab 01 has a really long name</span>
			</li>
			<li>
				<span data-tab="hc-tab02">Tab 02</span>
			</li>
			<li>
				<span data-tab="hc-tab03">Tab 03</span>
			</li>
			<li>
				<span data-tab="hc-tab04">Tab 04</span>
			</li>
			<li>
				<span data-tab="hc-tab05">Tab 05</span>
			</li>
			<!-- To add another tab, copy the li element with a different data-tab number -->
			<!-- Then copy hc-content-block and add the new data-tab number as a class -->
		</ul>
	</div>
	<div class="hc-tab-content">
		<div class="hc-content-block hc-tab01 hc-tab-show">
			<h4>This Is Tab 01 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt repudiandae vitae qui eveniet accusamus error possimus impedit voluptate quas, minus, tempore voluptatem a, architecto ipsum atque, ipsam quidem animi.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur fuga accusamus accusantium, unde voluptatum, ex dolore aspernatur est ullam minima facilis! In commodi unde laudantium voluptatibus distinctio repudiandae saepe inventore!</p>
		</div>
		<div class="hc-content-block hc-tab02">
			<h4>This Is Tab 02 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis cumque temporibus eum. Atque.</p>
		</div>
		<div class="hc-content-block hc-tab03">
			<h4>This Is Tab 03 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p>
		</div>
		<div class="hc-content-block hc-tab04">
			<h4>This Is Tab 04 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div class="hc-content-block hc-tab05">
			<h4>This Is Tab 05 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</div>
</div>
<div class="hc-tabs-wrapper">
	<div class="hc-tabs">
		<ul class="hc-tabs-list">
			<li>
				<span data-tab="hc-tab01">Tab 01</span>
			</li>
			<li class="hc-tab-active">
				<span data-tab="hc-tab02">Tab 02</span>
			</li>
			<li>
				<span data-tab="hc-tab03">Tab 03</span>
			</li>
		</ul>
	</div>
	<div class="hc-tab-content">
		<div class="hc-content-block hc-tab01">
			<h4>This Is Tab 01 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt repudiandae vitae qui eveniet accusamus error possimus impedit voluptate quas, minus, tempore voluptatem a, architecto ipsum atque, ipsam quidem animi.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur fuga accusamus accusantium, unde voluptatum, ex dolore aspernatur est ullam minima facilis! In commodi unde laudantium voluptatibus distinctio repudiandae saepe inventore!</p>
		</div>
		<div class="hc-content-block hc-tab02 hc-tab-show">
			<h4>This Is Tab 02 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis cumque temporibus eum. Atque.</p>
		</div>
		<div class="hc-content-block hc-tab03">
			<h4>This Is Tab 03 Content!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p>
		</div>
	</div>
</div>
<script>
	// Hello Content! (A Tabbing Script) by Memoria at The Initiative.
	// Last updated 07.22.18.
	helloContent('.hc-tabs-list li span');

	// You only need to add this function once
	function helloContent(selector) {
		var tabSelector = document.querySelectorAll(selector);

		// Check if selector is on the page
		if (tabSelector) {
			// Loop through tabs and add click event
			for (var i = 0; i < tabSelector.length; i++) {
				tabSelector[i].addEventListener( 'click', function(e) {
					// Store the current selector as a variable
					var current = e.target || e.srcElement;
					var dataAttribute = current.getAttribute('data-tab');

					// Get parent elements
					var tabContent = hcFindParent(current, 'hc-tabs-wrapper').querySelector('.hc-tab-content');
					var tabList = hcFindParent(current, 'hc-tabs-list');

					// Check if necessary elements are available
					if (tabList && tabContent) {
						if (tabList) {
							// Loop through hc-tabs-list child elements
							for (var j = 0; j < tabList.childNodes.length; j++) {
								var tabListOption = tabList.childNodes[j];
								var tabListClass = tabListOption.className;

								// Find any element with hc-tab-active and remove the class
								if (tabListClass && hcCheckValue(tabListClass, 'hc-tab-active')) {
									tabListOption.className = hcToggleClass('remove', tabListClass, 'hc-tab-active');
								}
							}

							// Add hc-tab-active to the new active tab
							current.parentNode.className = hcToggleClass('add', current.parentNode.className, 'hc-tab-active');
						}

						if (tabContent) {
							// Loop through hc-tabs-wrapper child elements
							for (var k = 0; k < tabContent.childNodes.length; k++) {
								var tabContentBlock = tabContent.childNodes[k];
								var tabContentClass = tabContentBlock.className;

								// Find the hc-content-block elements and add or remove hc-tab-show class
								if (tabContentClass && hcCheckValue(tabContentClass, 'hc-content-block')) {
									if (hcCheckValue(tabContentClass, 'hc-tab-show') && !hcCheckValue(tabContentClass, dataAttribute)) {
										tabContentBlock.className = hcToggleClass('remove', tabContentClass, 'hc-tab-show');
									} else if (!hcCheckValue(tabContentClass, 'hc-tab-show') && hcCheckValue(tabContentClass, dataAttribute)) {
										tabContentBlock.className = hcToggleClass('add', tabContentClass, 'hc-tab-show');
									}
								}
							}
						}
					}
				});
			}

			// Find specific parent selectors
			function hcFindParent(selector, selectorClass) {
				while (selector = selector.parentNode) {
					if (hcCheckValue(selector.parentNode.className, selectorClass)) {
						return selector.parentNode;
					}
				}
				return null;
			}

			// Add or remove classes
			function hcToggleClass(type, selectorClass, value) {
				var newClasses = (type == 'add') ? (selectorClass + ' ' + value) : selectorClass.replace(value, '');
				return newClasses.replace(/ +/g, ' ').trim()
			}

			// Check if the value is in the string
			function hcCheckValue(selector, find) {
				return (selector.indexOf(find) !== -1) ? true : false;
			}
		}
	}	
</script>