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

Multiple tab sections on the same page.

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>

240705_pastedImage_1.png

240706_pastedImage_2.png

Kind Regards

Matt

4 Replies
Stefanie
Community Team
Community Team

 @mattbartlett ‌, I've shared your question with the https://community.canvaslms.com/groups/designers?sr=search&searchId=6e1ac68b-3767-47ce-a6d0-f3bee223...‌ 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.

James
Community Champion

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.

kenneth_larsen
Community Champion

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.

chofer
Community Coach
Community Coach

Hello there,  @mattbartlett ...

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 ‌ 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!