Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

Vertical Tabs

Hi there,

We are trying to create some vertical tabs in Canvas (very much like this

We have successfully used this style guide code for Regular tabs in the past:

<div id="styleguide-tabs-demo-regular">  <ul>    <li><a href="#tabs-1">Tab One</a></li>    <li><a href="#tabs-2">Tab Two</a></li>    <li><a href="#tabs-3">Tab Three</a></li>  </ul>  <div id="tabs-1">Tab 1 content</div>  <div id="tabs-2">Tab 2 content</div>  <div id="tabs-3">Tab 3 content</div></div>

We have played around adding some CSS and Java but don't seem to be getting very far.

Any ideas would be greatly appreciated.

Kind regards,


0 Kudos
7 Replies
Community Contributor

Here is one way that we have developed vertical tabs...


Hi John,

Thank you very much for your help with this. I have run this in our test environment and it is working superbly.

A big help!

Many thanks,


0 Kudos

Hi!  Thanks for sharing this!  I tried using the html code on a page and it did not display the tabs.  Do I need to add code to the javascript file and/or css file in order for it to work?  I'm new to editing the code in Canvas, so any advice is greatly appreciated!

0 Kudos

Yes you need both the js and css to work with the html.

It looks like the Zip files are not able to be opened.  Is there anyway you can share the HTML code again? @Boekenoogen  

0 Kudos

Sorry it took me this long to respond.  I am not a big fan of this new format. Send me an email to and I will send you the information.

Dr. John Boekenoogen
Executive Director, RCTLE
Embry-Riddle Aeronautical University - Worldwide

0 Kudos
New Member

Nice solution! How would I go about preloading the contents of the first page?

0 Kudos