Menu icon Foundation
Deep Linking a Tab within a Tab - (F6)?

Hi...

So I recently found out you can deep-link a tab simply using the hash-tag reference:
> https://foundation.zurb.com/sites/docs/tabs.html#tabs-and-urls

My question though... what if you have a tab navigation within another tab navigation? I tried adding multiple hashtags ~ i.e. <a href="#panel1#panel2v">DEEP LINK</a> but I was not able to get this to work.

Is this possible and can anyone show me a way to achieve this?

_________________

MY TAB / TAB NAV:

         <div class="row" id="infoPanelID">
				<div class="medium-12 columns"> 
					<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
					  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
					  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
					</ul>
					<div class="tabs-content" data-tabs-content="example-tabs">
					  <div class="tabs-panel is-active" id="panel1">
						<div class="row collapse">
						  <div class="medium-3 columns">
							<ul class="vertical tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
							  <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
							  <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
							  <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
							</ul>
						  </div>
						  <div class="medium-9 columns">
							<div class="tabs-content" data-tabs-content="example-tabs">
							  <div class="tabs-panel is-active" id="panel1v">
								<p>One</p>
								<p>Check me out! I'm a super cool Tab panel with text content!</p>
							  </div>
							  <div class="tabs-panel" id="panel2v">
								<p>Two</p>
								<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
							  </div>
							  <div class="tabs-panel" id="panel3v">
								<p>Three</p>
								<p>Check me out! I'm a super cool Tab panel with text content!</p>
							  </div>
							</div>
						  </div>
						</div>
					  </div>
					  <div class="tabs-panel" id="panel2">
						<p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
					  </div>
					</div>
				</div>
      		</div>

tabsF6deep link

Hi...

So I recently found out you can deep-link a tab simply using the hash-tag reference:
> https://foundation.zurb.com/sites/docs/tabs.html#tabs-and-urls

My question though... what if you have a tab navigation within another tab navigation? I tried adding multiple hashtags ~ i.e. <a href="#panel1#panel2v">DEEP LINK</a> but I was not able to get this to work.

Is this possible and can anyone show me a way to achieve this?

_________________

MY TAB / TAB NAV:

         <div class="row" id="infoPanelID">
				<div class="medium-12 columns"> 
					<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
					  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
					  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
					</ul>
					<div class="tabs-content" data-tabs-content="example-tabs">
					  <div class="tabs-panel is-active" id="panel1">
						<div class="row collapse">
						  <div class="medium-3 columns">
							<ul class="vertical tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
							  <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
							  <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
							  <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
							</ul>
						  </div>
						  <div class="medium-9 columns">
							<div class="tabs-content" data-tabs-content="example-tabs">
							  <div class="tabs-panel is-active" id="panel1v">
								<p>One</p>
								<p>Check me out! I'm a super cool Tab panel with text content!</p>
							  </div>
							  <div class="tabs-panel" id="panel2v">
								<p>Two</p>
								<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
							  </div>
							  <div class="tabs-panel" id="panel3v">
								<p>Three</p>
								<p>Check me out! I'm a super cool Tab panel with text content!</p>
							  </div>
							</div>
						  </div>
						</div>
					  </div>
					  <div class="tabs-panel" id="panel2">
						<p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
					  </div>
					</div>
				</div>
      		</div>
jinch over 1 year ago

Ok - so if anyone else is looking for a solution for this ~ you can do it with javascript like so:

 <a id="deepLink1">DEEP LINK 1</a>

<script>
	function open_tab(tab_id,panel) {
	  $("#"+tab_id).foundation("selectTab",$("#"+panel));
	}
	$("#deepLink1").on('click',function() {
		$("#example-tabs").foundation("selectTab",$("#panel1")),
		$("#example-tabs-vert").foundation("selectTab",$("#panel3v"))
	});
</script> 

 

And the Tabs:

<div class="row">
	<div class="medium-12 columns"> 
		<ul class="tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
		  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
		  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
		</ul>
		<div class="tabs-content" data-tabs-content="example-tabs">
		  <div class="tabs-panel is-active" id="panel1">
			<div class="row collapse">
			  <div class="medium-3 columns">
				<ul class="vertical tabs" data-tabs id="example-tabs-vert" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true">
				  <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
				  <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
				  <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
				</ul>
			  </div>
			  <div class="medium-9 columns">
				<div class="tabs-content" data-tabs-content="example-tabs-vert">
				  <div class="tabs-panel is-active" id="panel1v">
					<p>One</p>
					<p>Check me out! I'm a super cool Tab panel with text content!</p>
				  </div>
				  <div class="tabs-panel" id="panel2v">
					<p>Two</p>
					<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
				  </div>
				  <div class="tabs-panel" id="panel3v">
					<p>Three</p>
					<p>Check me out! I'm a super cool Tab panel with text content!</p>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		  <div class="tabs-panel" id="panel2">
			<p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
		  </div>
		</div>
	</div>
</div>