{exp:stash:set trim="yes" parse_tags="yes" process="start"}
	{stash:entry_id}{segment_1}{segment_2}{segment_3}{/stash:entry_id}
{/exp:stash:set}

{exp:stash:parse process="end"}

	{stash:embed:global-v4:base-slim}

	{exp:stash:set name="{stash:entry_id}_body"}

	{!-- ================= BEGIN BODY MAIN CORE =================  --}	
	<!-- BEGIN .content -->
	<section class="content mb50">		
	
	
	<div style="background:url(https://aws.hawaii-guide.com/files/images/backgrounds/pattern5-white.png) repeat-x;height:50px;bottom:-30px;position:absolute;clear:both;width:100%;"></div>
	</div>
	
	<div class="crumbs mt10">
		<nav>
			<ol class="cd-breadcrumb triangle">
				<li><a href="/"><i class="fa fa-home"></i><span class="noshow">Home</span></a></li>
				<li class="current"><em><span>Hawaii Tabs</span></em></li>
			</ol>
		</nav>
	</div>
	
	<div class="body-heading full wrapper-sides">
		<div class="article-header clearfix ">
			<h1 class="entry-title" itemprop="headline">Hawaii Tabs Demo</h1>
			<h4><i class="fa fa-compass"></i> Hawaii Tabs Testing... on this page...</h4>
		</div>
	</div>

	<div class="clear article-content" id="start">
		<div class="main nosidebar nopad">
			<div id="" class="row-fluid clear clearfix article-content wrapper-sides">
				<div class="small-12 columns">
		
					<h2 class="text-center">Tabs Test</h2>
					
					<div class="wrapper-slim">



		<div class="tabsy">

            <input type="radio" id="tab1" name="tab">
            <label class="tabButton" for="tab1">Jan</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in January</h3>
                    <p>When it comes to Hawaii, January is one of the best months to plan a visit for many reasons.</p>
                    <p>When visiting at this time, you will see tropical flowers in bloom and can bask in balmy tropical temperatures in the low 80s. You might be surprised that at this time of year the nights get a little cooler and drop into the mid to high 60s in some regions, but it’s nothing a light sweater can’t solve.</p>
					<p>Thousands of humpback whales migrate to the area in the winter, making January a peak month to observe them in their natural habitat.</p>
					<p>The only downside is that January follows Hawaii’s rainiest month, December. So, you will see slightly higher chances of rain. Many travelers report no issues with rain showers while visiting the islands in January as there’s plenty of sunshine to allow for outdoor activities.</p>
					<a href="/visiting-hawaii-in-january" title="Visiting Hawaii in January"><button class="btn btn-blue btn-lg">Full Article: Visiting Hawaii in January &raquo;</button></a>
					
                </div>
            </div>

            <input type="radio" id="tab2" name="tab">
            <label class="tabButton" for="tab2">Feb</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in February</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<a href="/visiting-hawaii-in-february" title="Visiting Hawaii in February"><button class="btn btn-blue btn-lg">Full Article: Visiting Hawaii in February &raquo;</button></a>
                </div>
            </div>

            <input type="radio" id="tab3" name="tab">
            <label class="tabButton" for="tab3">Mar</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in March</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab4" name="tab">
            <label class="tabButton" for="tab4">Apr</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in April</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab5" name="tab">
            <label class="tabButton" for="tab5">May</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in May</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab6" name="tab">
            <label class="tabButton" for="tab6">Jun</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in June</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab7" name="tab">
            <label class="tabButton" for="tab7">Jul</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in July</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab8" name="tab">
            <label class="tabButton" for="tab8">Aug</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in August</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab9" name="tab">
            <label class="tabButton" for="tab9">Sep</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in September</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->
             

            <input type="radio" id="tab10" name="tab">
            <label class="tabButton" for="tab10">Oct</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in October</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->

            <input type="radio" id="tab11" name="tab">
            <label class="tabButton" for="tab11">Nov</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in November</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->


            <input type="radio" id="tab12" name="tab">
            <label class="tabButton" for="tab12">Dec</label>
            
            <div class="tab">
                <div class="content">
                    <h3>Hawaii in December</h3>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                </div><!--content-->
            </div><!--tab-->




        </div><!--tabsy-->






					</div><!--wrapper-slim-->
	
	
				</div><!--columns-->
			</div><!--row-fluid-->
		</div><!--main-->
	</div><!--article-content-->

	</section><!--content-->	
	{!-- ================= END BODY MAIN CORE =================  --}	
	
	{/exp:stash:set}

	{exp:stash:set name="{stash:entry_id}_header_tags" parse_tags="yes"}

<style>

.tabButton {
    font-size: 15px; font-weight: bold; padding: 15px 20px; 
}

.tab {
    padding: 20px; text-align: left;
	border-top:5px solid #206B2A;
}

@-webkit-keyframes showTab {
	from {
		opacity: 0;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes showTab {
	from {
		opacity: 0;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
.tabsy label {
	margin-bottom:0;
}

.tabsy>button {
	width: 100%;
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
	border: 0;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
}

.tabsy>.tabButton {
	display: block;
	margin-top: 1px;
	background: #ccc;
	color: #222;
	border-left:1px solid #fff;
	border-right: 1px solid #fff;
	text-align: center;
	-webkit-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
	border-radius:5px 5px 0 0;
}

.tabsy>input {
	display: none;
}

.tabsy>input:checked+label+.tab {
	display: block;
}

.tabsy>input:checked+label+.tab>.content {
	-webkit-animation: showTab 250ms ease-in-out;
	animation: showTab 250ms ease-in-out;
}

.tabsy>.tab {
	background: #eee;
	display: none;
}

	.tabsy>input:checked+label {
		background: #206B2A;
		color: #fff;
	}

@media screen and (min-width: 890px) {
	.tabsy {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.tabsy>.tabButton {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		-ms-flex-align: start;
		align-items: flex-start;
		cursor: pointer;
	}

	.tabsy>input:checked+label {
		background: #206B2A;
		color: #fff;
	}

	.tabsy>.tab {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
	}
}


</style>



	{/exp:stash:set}
	
	{!-- Set the Entry Title --}		
	{exp:stash:set name="{stash:entry_id}_meta_title" trim="yes"}
		Hawaii-Guide Tabs | Hawaii-Guide
	{/exp:stash:set}
	
	{exp:stash:set name="{stash:entry_id}_canonical_url" trim="yes"}
		https://www.hawaii-guide.com{if segment_1}/{segment_1}{/if}{if segment_2}/{segment_2}{/if}{if segment_3}{segment_3}{/if}
	{/exp:stash:set}

	
	{exp:stash:set name="{stash:entry_id}_footer_tags" scope="site"}

<script>
//document.querySelectorAll('.tabButton').forEach(function(button) {
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const d = new Date();
let month = months[d.getMonth()];
let monthNum = "tab" + (d.getMonth() + 1);
	
let label = '';
for (let i = 0; i < 5; i++) {
      label = document.getElementsByClassName('tabButton')[i];
      let text = label.textContent;

      if (month == text){
	  	document.getElementById(monthNum).checked = true;
        //alert(monthNum);
      }
}
//});
</script>

	{/exp:stash:set}

{/exp:stash:parse}