[ARCHIVED] Content in Tab not showing up in last tab

[dekac]

I can't figure out why I can't get any content in my 4th tab to appear, I contacted Canvas support and they told me that enhanceable_content tabs are no longer supported, is this true? Thank you!

Here is a link to the code on codepen that I am using it was too long to post, my apologies in advance for my messy build\. I'm a newb🙃!

[kmeeusen · Accepted solution]

Hi @dekac 

ALERT! TL;DR!!!!

Sorry, I could not resist the joke, it is long, way too long for me right now, but when I plugged your code into a sandbox page it is obvious you have a missing href, or an href is pointing to a missing id. This is easy to do when the content under the tabs is complex. Done it myself too many times.

And yes, Enhanceable tabs are no longer supported, and have not been supported for several years now. But they still work, and I still use them!

Here is the base code needed for simple tabs...........

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

You will need to walk through your code and make sure the framework is correct.

Good luck!

Kelley

[kmeeusen · Accepted solution]

Hi @dekac 

ALERT! TL;DR!!!!

Sorry, I could not resist the joke, it is long, way too long for me right now, but when I plugged your code into a sandbox page it is obvious you have a missing href, or an href is pointing to a missing id. This is easy to do when the content under the tabs is complex. Done it myself too many times.

And yes, Enhanceable tabs are no longer supported, and have not been supported for several years now. But they still work, and I still use them!

Here is the base code needed for simple tabs...........

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

You will need to walk through your code and make sure the framework is correct.

Good luck!

Kelley

[nwilson7 · Accepted solution]

@dekac You are just missing a </div> right before you start your tab 4 (pasted in Canvas it is after line 941).  There is the one that closes out the last toggle you have in your 3rd tab but then not one to close out the tab.

Hope this helps!

-Nick

[dekac]

Thank you so much Nick! This fixed it! A million virtual hugs to you!!

[kmeeusen]

Hi @nwilson7 

Either you have more time on your hands than I do, or you are a dang good code proofreader. (I knew it was a missing Div tag!)

Whichever, great job and thank you for helping this member!

Kelley