[ARCHIVED] how do i create a multi tab page

[anakira_gabriel]

how do i create a multi tab page

[Chris_Hofer]

Good evening, @anakira_gabriel ...

There are a few ways you can do this in Canvas using code, but keep in mind that Canvas may phase this code out in the near future causing this code not to work any more.  I'm not exactly sure what their plans are or when they will phase this out, but it's something to be aware of.

This first example just makes a display of tabs on your page.  You will only see the tabs after you've saved the page...not while editing the page.

<div class="enhanceable_content tabs">
   <ul>
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

In the example above, "Tab One", "Tab Two" and "Tab Three" are the labels for the tabs.  You can give those any names that you want.  The "div" rows are where the content of those tabs will be housed.

In this second example, it's very similar to the first.  The difference is that you can give the tabs a background color (really, any hex color code that you want):

<div class="enhanceable_content tabs">
   <ul>
      <li style="background-color: #acf53d;"><a href="#fragment-1">Tab One</a></li>
      <li style="background-color: #c0f56e;"><a href="#fragment-2">Tab Two</a></li>
      <li style="background-color: #8eeb00;"><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

In this third example, the highlighted tab will change to a white background, and you can use a single hex color code to be a background color:

<div class="enhanceable_content tabs">
   <ul style="background-color: #dcfa70;">
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

I hope this will help.  Please let Community members know if you have any other questions about this...thanks!  Take care, stay safe, and be well.