[ARCHIVED] [ARCHIVED] Linking to information in tabbed content

[akling1]

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:

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.

[surrencm]

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.)

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

[akling1]

Hi Monica --

Thanks for the input. Unfortunately, I'm not seeing the same coding as you showed. The page has div id tags but no hashtags. The code for the first tab looks like this:

<div class="kl_panels_wrapper kl_panels_tabs">
<h3 id="kl_panel_0" class="kl_panel_heading kl_panel_0">A-D</h3>
<div id="kl_panel_0_content" class="kl_panel_content kl_panel_0">

Which is followed by the contents of the tab and a </div>, followed by similar code for the next tab:

<h3 id="kl_panel_1" class="kl_panel_heading kl_panel_1">E-H</h3>
<div id="kl_panel_1_content" class="kl_panel_content kl_panel_1">

Does this mean that when I used the Canvas Design Tools to build the page, I ended up with something other than traditional tabs? Will adding the <li><a href ... code from your screenshot make a difference?

Andrew

[kona]

I'm not sure if it will help or not, but I just checked the coding for the tabs I use in my course and this is what I'm using:

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab1">Overview</a></li>
<li><a href="#tab2">Study Resources</a></li>
<li><a href="#tab3">Assignments</a></li>
</ul>
<div id="tab1">
<h2>Overview</h2>
<p><span>Welcome to Week 5! <span>The information on the following tabs cover</span> what you need to study and the assignments you need to complete for Week 5.</span></p>
<p><iframe src="https://www.youtube.com/embed/RvyRz5VhdZs?rel=0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>
</div>

[surrencm]

Hey Andrew,

We are just starting with CidiLabs Design Tools.  The code I had came from the Canvas Style Guide for our institution. You may want to contact CidiLabs and ask them if there is a way to add 'anchor' points into their tabs code to allow you to do this. 

If you find out, please share, we may need that once we start implementing Design Tools.

Thanks and Good luck!

Monica

[kenneth_larsen]

There is not currently a way to link to a specific tab within Design Tools. But that is a great idea. I will see what I can do to fix that.

The reason that Monica's suggestion didn't work is that the way that tabs are created using Design Tools is different than the manual method mentioned by Monica and Kona. With Design Tools, you customize headings and content and then when the content is displayed within Canvas there is code that restructures it to work as a tabbed panel. There are a variety of reasons for that. The main reason is that you don't have to get into the HTML to create it. This approach was also essential prior to the ability to add JavaScript to the mobile app so that the content would degrade well when viewed in the mobile app or pulled through the API.

I will see what I can come up with to make it work in Design Tools and get back with you later today.

[kenneth_larsen · Accepted solution]

Okay, this functionality has been added to Design Tools. Here is how it works:

If you would like to just open a specific tab or accordion panel, append ?panel= and then the number for the panel you want opened.

Example: <a href="https://inst.instructure.com/courses/1/my-page?panel=2">My Link</a>

If you would like to open a panel and then make sure an anchor is in view you would add the anchor to the end.

Example: <a href="https://inst.instructure.com/courses/1/my-page?panel=2#target">My Link</a>

This approach will work for accordions, expanders or tabs. If you have multiple panel widgets on a page, just count each panel until you find the one you want opened.

Let me know if you have any questions. Thanks for the Friday afternoon challenge!

[kona]

You sir are amazing!

[surrencm]

Thank you so much!

[akling1]

Thank you! This is exactly what I was hoping to find! Now to get cracking and update all my Glossary links before my course starts on Wednesday.

[kenneth_larsen]

Glad to hear it. Let me know if it gives you any problems.

[ofelia_mangen]

Hello!

I'm using tabs to build out some content. Everything is working well except internal links. External links work just fine, but links within Canvas are not working. More specifically...

Internal links to course tools (e.g., discussions) and tagged headers (i.e., #header) do not work. Any code that contains an internal link to a course tool cannot be saved (i.e., Canvas's junk response to junk code). Links to internal headers can be saved and clicked, but do not navigate to the target destination. Note: Code in red below was auto-generated by Canvas in RTE using right sidebar link menu (for tools) and RTE link dialog (for tagged headers).

I've tried various iterations of the code below:

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab-01"><i class="icon-educators"></i> Instructors</a></li>
<li><a href="#tab-02"><i class="icon-target"></i> Learning Goals</a></li>
<li><a href="#tab-03"><i class="icon-flag"></i> Course Policies</a></li>
</ul>

[...removed for brevity]

<div id="tab-03">

[...]

<h3 id="Communication"><i class="icon-flag">   Communication </i></h3>
<p>Get into the habit of checking CourseWorks and LionMail daily, since it&rsquo;s how we&rsquo;ll keep you up-to-date on any changes in assignments or other developments.</p>
<p>ADD COMMUNICATION POLICY HERE</p>
<h4 id="AskingQuestions">Asking Questions</h4>
<p>Use the General Questions discussion <i class="icon-discussion"> </i> for questions about the course, syllabus, assignments, etc.</p>
<p>Use the <a title="Open Discussion" href="https://courseworks2.columbia.edu/courses/80165/discussion_topics/276872">Open Discussion</a> <i class="icon-discussion"> </i> as an unmoderated space for you to connect with your fellow students.</p>
<p><a href="#h_258081927151546462297738">Email the instructors</a> <i class="icon-email"> </i> for other communication related to your work or your performance in the course.</p>
<p><a href="#h_258081927151546462297738">Email the instructors</a> <i class="icon-email"> </i> for other communication related to your work or your performance in the course.</p>

Any insights or suggestions for troubleshooting further are much appreciated!