Jump to content
  • Best Friends

       (2 reviews)

    A tabbing template using the tabbing script I wrote (also found on The Initiative). I believe the header image was from Unsplash.


    Actual Template Responsive

    Here is a title

    • Tab 01
    • Tab 02
    • Tab 03
    • Tab 04

    This Is Tab 01 Content

    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.

    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.

    This Is Tab 02 Content!

    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.

    • List item 01
    • List item 02
    • List item 03

    This Is Tab 03 Content!

    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.

    This Is Tab 04 Content!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Template code

    <style>
    	/* Best Friends by Memoria at The Initiative.
    	   Last updated 07.24.18.
    	   Please do not remove credits! */
    	   
    	/* Best Friends - Overall Styles */
    	.bstfrnds {
    		max-width: 700px; /* max template width */
    		width: auto;
    		margin: 0 auto;
    		font-family: 'Trebuchet MS', arial, sans-serif; /* font family */
    		font-size: 13px;
    		line-height: 1.7;
    		color: #f5f5f5; /* font color */
    		border: 1px solid #383c46; /*background color */
    		background: #383c46; /*background color */
    	}
    	.bstfrnds, .bstfrnds * {
    		box-sizing: border-box;
    	}
    	.bstfrnds h3, .bstfrnds h4 {
    		font-family: georgia, garamond, times new roman, serif;
    		font-style: italic;
    		font-weight: normal;
    	}
    	.bstfrnds h3, .bstfrnds h4, .bstfrnds p, .bstfrnds ul {
    		margin: 0 0 20px 0;
    	}
    	.bstfrnds a {
    		color: #a4adc5; /*link color */
    		text-decoration: none;
    	}
    	.bstfrnds a:hover {
    		color: #f5f5f5; /*link hover color */
    	}
    	
    	/* Best Friends - Header */
    	.bstfrnds .bstfrnds-header {
    		position: relative;
    		line-height: 0;
    	}
    	.bstfrnds .bstfrnds-header img {
    		max-width: 100%;
    		width: auto;
    	}
    	.bstfrnds .bstfrnds-header h3 {
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		background: rgba(255, 255, 255, 0.5); /*header background color - keep rgba for transparency */
    		margin: 0;
    		padding: 20px;
    		color: #383c46; /*header font color */
    		font-size: 20px;
    		line-height: 1;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		white-space: nowrap;
    	}
    	
    	/* Best Friends - Tabs */
    	.hc-tabs-wrapper .hc-tabs-list {
    		list-style: none;
    		margin: 0;
    		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: 25%; /*Width = 100 / Number of tabs */
    	}
    	.hc-tabs-wrapper .hc-tabs-list li span {
    		display: block;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		white-space: nowrap;
    		background: #50634e;
    		border-right: 1px solid #485946;
    		color: #f5f5f5;
    		cursor: pointer;
    		padding: 5px 20px;
    		text-align: center;
    	}
    	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active span {
    		background: #383c46;
    		border-right-color: #32363f;
    	}
    	.hc-tabs-wrapper .hc-tabs-list li:last-child span {
    		border-right-color: transparent;
    	}
    	.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;
    		padding: 20px;
    	}
    	.hc-tabs-wrapper .hc-content-block > *:last-child {
    		margin-bottom: 0;
    	}
    	.hc-tabs-wrapper .hc-content-block h4 {
    		font-size: 16px;
    	}
    	.hc-tabs-wrapper .hc-content-block.hc-tab-show {
    		position: static;
    		visibility: visible;
    		opacity: 1;
    	}
    	
    	/* Best Friends - Responsive */
    	@media only screen and (max-width: 540px) {
    		.bstfrnds .bstfrnds-header h3 {
    			font-size: 17px;
    		}
    		.hc-tabs-wrapper .hc-tabs-list li {
    			width: auto;
    			float: none;
    		}
    		.hc-tabs-wrapper .hc-tabs-list li span {
    			text-align: left;
    			border-bottom: 1px solid #485946;
    		}
    		.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active span {
    			border-bottom-color: #32363f;
    		}
    		.hc-tabs-wrapper .hc-tabs-list li span,	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active {
    			border-right: 0;
    		}
    		.hc-tabs-wrapper .hc-content-block h4 {
    			font-size: 15px;
    		}
    	}
    </style>
    <div class="bstfrnds">
    	<div class="bstfrnds-header">
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" />
    		<h3>Here is a title</h3>
    	</div>
    	<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</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>
    			</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. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> 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 <a href="//google.com">cumque</a> temporibus eum. Atque.</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>
    				<ul>
    					<li>List item 01</li>
    					<li>List item 02</li>
    					<li>List item 03</li>
    				</ul>
    			</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>
    	</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>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

    Thatmanzai

      

    It looks so neutral, very good template, I have to learn it to implement it

    • Love 1

    Share this review


    Link to review
    SoreWounds

       1 of 1 member found this review helpful 1 / 1 member

    Greatly made! I love this code, thank you so much for making it. 

    • Love 1

    Share this review


    Link to review

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.