AnsweredAssumed Answered

Multiple tab sections on the same page.

Question asked by Matt Bartlett on Jul 7, 2017
Latest reply on Sep 7, 2017 by chofer@morainepark.edu

Like • Show 1 Like1
Comment • 4

Hello All.

I am trying to add 2 separate tabs groups/section/bits to a course.

I'm not sure what I'm doing wrong but the titles for each tab appear in both of the tabs groups. In the screen shots below (sorry if they look bad but this input box has shrunk them) I've highlighted the issue. In picture 1 there are three links that are supposed to be for a completely separate tab section at the bottom of the page.

The second screenshot shows this separate tab section but again the tab titles from the first section have appeared as well.

Interestingly enough when you click on the titles in each tab section the content of each tab only shows in the correct section.

I.e in screenshot 1 if you click on the circled linked it doesn't show you any content for the Stakeholder mapping tool and the same with the Account or practice links in the second screen shot.

Our code is formatted as so:

<div id="kl_wrapper" class="kl_bookmark"></div>
<div class="kl_tabbed_section">
<h4 class="kl_tab_0">This is the FIRST tab in the FIRST tab section</h4>
<div id="kl_tab_0" class="kl_tab_content kl_tab_0">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
<h4 class="kl_tab_1">This is the SECOND tab in the FIRST tab section</h4>
<div id="kl_tab_1" class="kl_tab_content kl_tab_1">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
</div>

Insert filler

<div class="kl_tabbed_section">
<h4 class="kl_tab_0">This is the FIRST tab in the SECOND tab section</h4>
<div id="kl_tab_0" class="kl_tab_content kl_tab_0">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
<h4 class="kl_tab_1">This is the SECOND tab in the SECOND tab section</h4>
<div id="kl_tab_1" class="kl_tab_content kl_tab_1">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
</div>

Kind Regards

Matt

No one else has this question

Outcomes

Stefanie Sanders

Jul 7, 2017 5:44 AM

Matt, I've shared your question with the Instructional Designers group, which is where the experts on these matters hang out. If you haven't yet joined the group, you can do so by navigating to the home page for the group and selecting Join Group from the Actions dropdown that appears at the upper right of that page.

1 person found this helpful

Actions

James Jones

Jul 8, 2017 9:33 AM

Without knowing how you're implementing tabs, it may be difficult to answer. I'm going to guess that it's related to Kenneth Larson because of the kl_ and (primarily) because that's what shows up as the first Google hit for me when I search for kl_wrapper tabs.

Before I knew that, the first thing that jumps out at me is that you're reusing the element IDs like id="kl_tab_0" and id="kl_tab_1" and those must be unique on a page.

That was written before I searched for kl_wrapper tabs on Google. When I did that, I came up with this note about Accordian/Tabs created outside kl_wrapper div.

The tabs and accordions are designed to reside within the kl_wrapper and are inserted at the cursor position.

There's more, but the second thing I noticed in your code was that you ended the kl_wrapper div before any of the tab code. In other words, you had an empty wrapper and that's not the way the comment reads it should work. I would start by making the wrapper actually wrap the others.

I would guess there should actually be two wrappers, one for each tab section, but I will also say that we don't use Kennethware ourselves, so I'm thinking out loud based on how it should logically work and the comment was made rather than from personal experience. That comment was made in 2015, so things may not still work the same, but I would at least start with that.

6 people found this helpful

Actions

Kenneth Larsen Jul 10, 2017 12:55 PM

The method for adding accordions/tabs in the original Design Tools/KennethWare was designed to only allow 1 accordion and/or 1 tabbed widget per page. The tools were originally created for use by Instructional Designers at Utah State University and the original consensus was that we didn't want users creating multiple tabbed widgets in a single piece of content.

When the JavaScript identifies code for a tabbed widget, it grabs all of the headings and content and transforms them into a tabbed widget. This is why all of your content is getting merged into one set of tabs rather than the two you created.

When I rebuilt the tools for the SaaS solution offered through Cidi Labs, the one widget limitation was removed.

5 people found this helpful

Actions

chofer@morainepark.edu

Sep 7, 2017 5:29 PM

Hello there, Matt Bartlett...

I noticed that we have not heard from you since you first posted this question here in the Canvas Community two months ago. So, I wanted to check in with you to see if you've had a chance to review the responses you've received from James Jones and Kenneth Larsen. Did either of their replies help to answer your question? Or, are you still looking for some help with your initial question? If you feel that one of the above responses has helped to answer your question, please go ahead and mark that answer as "Correct". However, if you are looking for some additional help with this, please post a message below so that members of the Community can help you further. For now, I am going to mark your question as "Assumed Answered", but that won't keep you or others from posting additional questions/comments below. I hope that's okay with you, Matt. Looking forward to hearing from you soon!

1 person found this helpful

Actions

4 Replies

Stefanie Sanders Jul 7, 2017 5:44 AM
Mark Correct
Correct Answer
Matt, I've shared your question with the Instructional Designers group, which is where the experts on these matters hang out. If you haven't yet joined the group, you can do so by navigating to the home page for the group and selecting Join Group from the Actions dropdown that appears at the upper right of that page.
1 person found this helpful
Like • Show 1 Like1
Actions
James Jones Jul 8, 2017 9:33 AM
Mark Correct
Correct Answer
Without knowing how you're implementing tabs, it may be difficult to answer. I'm going to guess that it's related to Kenneth Larson because of the kl_ and (primarily) because that's what shows up as the first Google hit for me when I search for kl_wrapper tabs.

Before I knew that, the first thing that jumps out at me is that you're reusing the element IDs like id="kl_tab_0" and id="kl_tab_1" and those must be unique on a page.

That was written before I searched for kl_wrapper tabs on Google. When I did that, I came up with this note about Accordian/Tabs created outside kl_wrapper div.
The tabs and accordions are designed to reside within the kl_wrapper and are inserted at the cursor position.
There's more, but the second thing I noticed in your code was that you ended the kl_wrapper div before any of the tab code. In other words, you had an empty wrapper and that's not the way the comment reads it should work. I would start by making the wrapper actually wrap the others.

I would guess there should actually be two wrappers, one for each tab section, but I will also say that we don't use Kennethware ourselves, so I'm thinking out loud based on how it should logically work and the comment was made rather than from personal experience. That comment was made in 2015, so things may not still work the same, but I would at least start with that.
6 people found this helpful
Like • Show 2 Likes2
Actions
Kenneth Larsen Jul 10, 2017 12:55 PM
Mark Correct
Correct Answer
The method for adding accordions/tabs in the original Design Tools/KennethWare was designed to only allow 1 accordion and/or 1 tabbed widget per page. The tools were originally created for use by Instructional Designers at Utah State University and the original consensus was that we didn't want users creating multiple tabbed widgets in a single piece of content.

When the JavaScript identifies code for a tabbed widget, it grabs all of the headings and content and transforms them into a tabbed widget. This is why all of your content is getting merged into one set of tabs rather than the two you created.

When I rebuilt the tools for the SaaS solution offered through Cidi Labs, the one widget limitation was removed.
5 people found this helpful
Like • Show 3 Likes3
Actions
chofer@morainepark.edu Sep 7, 2017 5:29 PM
Mark Correct
Correct Answer
Hello there, Matt Bartlett...

I noticed that we have not heard from you since you first posted this question here in the Canvas Community two months ago. So, I wanted to check in with you to see if you've had a chance to review the responses you've received from James Jones and Kenneth Larsen. Did either of their replies help to answer your question? Or, are you still looking for some help with your initial question? If you feel that one of the above responses has helped to answer your question, please go ahead and mark that answer as "Correct". However, if you are looking for some additional help with this, please post a message below so that members of the Community can help you further. For now, I am going to mark your question as "Assumed Answered", but that won't keep you or others from posting additional questions/comments below. I hope that's okay with you, Matt. Looking forward to hearing from you soon!
1 person found this helpful
Like • Show 0 Likes0
Actions

Multiple tab sections on the same page.

Outcomes

Related Content

Recommended Content