cancel
Showing results for 
Search instead for 
Did you mean: 
dflanagan1
Community Member

Vertical Tabs

Hi there,

We are trying to create some vertical tabs in Canvas (very much like this https://www.w3schools.com/howto/howto_js_vertical_tabs.asp)

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,

Drew

0 Kudos
7 Replies
Boekenoogen
Community Contributor

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

309187_pastedImage_1.png

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,

Drew

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!

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  

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

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

greenengineer
Community Member

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