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

Linking to information in tabbed content

Jump to solution

We offer a non-credit course for property owners looking to maintain or expand woodland properties. Using the Design Tools, I've built a tabbed Glossary page that defines the forestry and ecology terms we use in the course:Screenshot of Glossary tabs

My challenge now is to link the terms found elsewhere in the course to this page and the tabs within it, but so far I've only been able to figure out how to link to the main page (as shown above). I've created HTML anchors for each term in the glossary, but linking to the page and the anchors only takes readers to this main page (rather than jumping to the term itself, on any tab). 

I've read the other discussions about using tabs, such as Organizing Media Files with Tabs and Tables, but haven't found the answer to my question ... or maybe I'm missing something. I'd describe myself as an HTML neophyte who knows just a bit more than the basics. I'd appreciate any help or ideas! Thanks in advance.

Tags (1)
11 Replies
surrencm
Community Member

When you link to the content page with your tabs, you will need to add the name of the anchor point for the tab you wish to go to within the href tag.  

For instance, if you want to link to a vocab word that is listed in the 2nd tab, per the code in the screenshot below, you would want to use #tabs-2.  
(Please note: Your code may vary based on your institution's style sheet, so be sure to look at the code for your tabs.)

Sample Tab code with the anchor point of the tab highlighted.

After you link the vocab word in Canvas, switch to the HTML  editor and find the link (href) tag, and at the end of the content page URL in the href tag, add the name of the anchor point for the tab, no spaces.

<a href="https://xxxx.instructure.com/courses/148/pages/tabs-sample#tabs-2">

After you save it, test it out.  If you go back and look at the code after you save it, Canvas might add some additional code.

Hope this helps.

~Monica