<p>
	Use any number of tabs shortcodes within your Joomla <span class="highlight">articles or modules</span>.<br />
	They can easily be added inside the editor by using <strong>
	<a class="yjsg-link-lightbox" href="images/docs/tabs-lg.jpg">
		[yjsgfa name="fa fa-picture-o"] Tabs shortcode form
	</a>
	</strong> located under text editor or by adding shortcodes directly.
</p>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">examples:</h3>
	</div>
	<div class="yjsg-col-1-2">
		<h3 class="yjsg-sub-heading">Tabnav</h3>
		<div class="yjsg-hr-empty"></div>
		<br/>
		[yjsgstabs id="tabs1" type="tabnav"]<br/>
		[yjsgstabsgroup title="Tab title" active="1"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque placerat nisl sed pulvinar consectetur.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.
		</p>
		[/yjsgstabsgroup]<br/>
		[/yjsgstabs]<br/>
	</div>
	<div class="yjsg-col-1-2">
		<h3 class="yjsg-sub-heading">Tabpills</h3>
		<div class="yjsg-hr-empty"></div>
		<br/>
		[yjsgstabs id="tabs2" type="tabpills"]<br/>
		[yjsgstabsgroup title="Tab title" active="1"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis.Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[/yjsgstabs]<br/>
	</div>
</div>
<div class="yjsg-row">
	<div class="yjsg-col-1-2">
		<h3 class="yjsg-sub-heading">Tabs left</h3>
		<div class="yjsg-hr-empty"></div>
		<br/>
		[yjsgstabs id="tabs3" type="tabsleft"]<br/>
		[yjsgstabsgroup title="Tab title" active="1"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[/yjsgstabs]<br/>
	</div>
	<div class="yjsg-col-1-2">
		<h3 class="yjsg-sub-heading">Tabs right</h3>
		<div class="yjsg-hr-empty"></div>
		<br/>
		[yjsgstabs id="tabs4" type="tabsright"]<br/>
		[yjsgstabsgroup title="Tab title" active="1"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[/yjsgstabs]<br/>
	</div>
</div>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">Tabs centered</h3>
		<div class="yjsg-hr-empty"></div>
		<br/>
		[yjsgstabs id="tabs5" type="tabscentered"]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="1"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[yjsgstabsgroup title="Tab title" active="0"]
		<p>
			Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien.Nulla ut est tincidunt, ultrices arcu et, molestie libero. Pellentesque egestas <span class="highlight">dignissim</span> quam vel pretium. Fusce elementum <strong>vulputate</strong> sapien. Etiam eget nisl a tortor elementum mollis. Pellentesque placerat nisl sed pulvinar consectetur.
		</p>
		[/yjsgstabsgroup]<br/>
		[/yjsgstabs]<br/>
	</div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgstabs id="tabs5" type="tabnav"}//tabnav|tabpills|tabsleft|tabsright|tabscentered
		{yjsgstabsgroup title="Tab title" active="1"}Tab content goes here...{/yjsgstabsgroup}
		{yjsgstabsgroup title="Tab title" active="0"}Tab content goes here...{/yjsgstabsgroup}
		{yjsgstabsgroup title="Tab title" active="0"}Tab content goes here...{/yjsgstabsgroup}
		{/yjsgstabs}[/yjsgpre] </div>
</div>
