"Target container is not a dom element"

[SHANNONGATES]

I am not someone who is good at creating HTML coding but really would like to be able to create TABS at the top of a page in Canvas LMS. I created a page with 4 tabs (quite proud of myself), but when I went to save I recieved the following message and could not see the page I had just created.

---> "Target container is not a dom element in canvas react"

Can someone help? or where do I find help?

[Chris_Hofer · Accepted solution]

Hi there, @SHANNONGATES ...

Have you tried code like this?

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#fragment-1">PUT TITLE FOR TAB 1 HERE</a></li>
        <li><a href="#fragment-2">PUT TITLE FOR TAB 2 HERE</a></li>
        <li><a href="#fragment-3">PUT TITLE FOR TAB 3 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>

I'd also encourage you to read through Solved: HTML to Create Tabs That Work for Keyboard Navigat... - Instructure Community - 618307 because there is a good posting from @seanbeirnes about jQuery related to tabs.  There is also some good information from @James posted in this archived thread: Solved: [ARCHIVED] Formatting tabs in Canvas page - Instructure Community - 197474.

I hope this will be of some help to you.

[SHANNONGATES]

This is my current coding... Is the problem in the links?

<p><span style="color: #236fa1;"><strong>Today: Students will go around and listen to the Liedership Students present the LIED WAY at different stations around the school grounds.&nbsp;</strong></span></p>
<p style="padding-left: 40px;"><strong>Stations Schedule: </strong>&nbsp;You will have the same schedule as Ms. Conners in Room 803</p>
<p style="padding-left: 80px;">Your schedule for the reteach is as follows:</p>
<p style="padding-left: 120px;">8:25-8:35 Cafeteria/Commons Area<br />8:30-8:45 Hallway/Bathroom<br />8:45-9:15 Classroom Time</p>
<div class="enhanceable_content tabs">
<ul>
<li><a href="https://msccsd.instructure.com/#tabs-1">Overview</a></li>
<li><a href="https://msccsd.instructure.com/#tabs-2">What is Branding?</a></li>
<li><a href="https://msccsd.instructure.com/#tabs-3">Create Your Brand</a></li>
<li><a href="https://msccsd.instructure.com/#tabs-4">Assignment</a></li>
</ul>

[SHANNONGATES]

I found in the code it was trying to connect to the course cards. So.. I deleted that and then it worked! Thank you for your help. I will check out your links.