Canvas Support

Multiple tabs

6 replies·opened Dec 13, 2017
V
VallenssiaDec 13, 2017

Hi,
Could you please give me an idea how to create multiple vertical/horizontal tabs? I need it to be TAB 1 (text) -> TAB 1a (text) -> TAB 1aa (image with text).
Thanks

S
SemiColonWebSTAFFDec 13, 2017

Hello,

You can Copy/Paste the Tabs Code, but change the IDs of the Individual Tabs. Example: 

<div class="tabs clearfix">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			Tab Content 1
		</div>
		<div class="tab-content clearfix" id="tab-2">
			Tab Content 2
		</div>
		<div class="tab-content clearfix" id="tab-3">
			Tab Content 3
		</div>

	</div>

</div>

<div class="tabs clearfix">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-4">Tab 1</a></li>
		<li><a href="#tab-5">Tab 2</a></li>
		<li><a href="#tab-6">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-4">
			Tab Content 1
		</div>
		<div class="tab-content clearfix" id="tab-5">
			Tab Content 2
		</div>
		<div class="tab-content clearfix" id="tab-6">
			Tab Content 3
		</div>

	</div>

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

V
VallenssiaDec 14, 2017

I actually meant something like this, see the image. It can be vertical or horizontal.
Thanks

V
VallenssiaDec 14, 2017

Sorry for the file, here is the smaller version.

S
SemiColonWebSTAFFDec 14, 2017

Hello,

This is Possible too! :) You can simply consider use the following code: 

<div class="tabs side-tabs clearfix">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			Tab Content 1
		</div>
		<div class="tab-content clearfix" id="tab-2">
			<div class="tabs side-tabs clearfix">

				<ul class="tab-nav clearfix">
					<li><a href="#tab-4">Tab 1</a></li>
					<li><a href="#tab-5">Tab 2</a></li>
					<li><a href="#tab-6">Tab 3</a></li>
				</ul>

				<div class="tab-container">

					<div class="tab-content clearfix" id="tab-4">
						Tab Content 1
					</div>
					<div class="tab-content clearfix" id="tab-5">
						Tab Content 2
					</div>
					<div class="tab-content clearfix" id="tab-6">
						Tab Content 3
					</div>

				</div>

			</div>
		</div>
		<div class="tab-content clearfix" id="tab-3">
			Tab Content 3
		</div>

	</div>

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

V
VallenssiaDec 14, 2017

Yes! Thanks, and if I forgot to mention the Canvas template is fantastic, it has all the features you might ever need!

S
SemiColonWebSTAFFDec 15, 2017

Hello,

Thank you so so much for the Kind Words! We Really Appreciate them! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard