cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
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
Highlighted
Community Member

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!

0 Kudos
Highlighted

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

Highlighted

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.

Highlighted

Thank you so much!

Highlighted

You sir are amazing!

Highlighted
Surveyor

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!

View solution in original post

Highlighted

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.

Highlighted

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

Highlighted
Community Coach
Community Coach

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>

Highlighted

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

0 Kudos