Vertical Tabs

[dflanagan1]

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

[Boekenoogen]

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

[dflanagan1]

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

[monica_nahas]

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!

[Boekenoogen]

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

[ElizabethPruitt]

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

[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]

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