Home page suddenly completely blank

[KaylaGoodman]

Hello all!

I am a high school teacher and my students use ipads and the Canvas app. Up until this week, I have had no problems with Canvas, but all of a sudden, my home page won't load in the app (but just one out of my 4 courses). It is still accessible in the browser, but when I designed it, I tried to make sure it worked in both places. I have accordion menus built into my home page using the html code. I'm worried the app doesn't support this anymore for some reason. Does anyone have any ideas or have experienced this?

Thanks for all your help and insight! If you'd like to see my Canvas page, reach out to me.

[Chris_Hofer]

Hi @KaylaGoodman ...

Does your accordion HTML code look similar to the following...

<hr />
<div class="enhanceable_content accordion">
    <h3><a href="#">TYPE TITLE TO FIRST ACCORDION TAB</a></h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur ...</p>
    </div>
    <h3><a href="#">TYPE TITLE TO SECOND ACCORDION TAB</a></h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur ...</p>
    </div>
</div>

If so, I just checked a page I have access to in a Canvas environment, and I don't think that it's working like it used to.  When I view the page, it's just some H3 headings with links and then the Lorem ipsum text below each one.

There might be some good alternatives here that you could try out in your course: Solved: Accordion Alternative - Details tag - Instructure Community (canvaslms.com).

Hope this will help a bit.  Sing out if you have any questions...thanks!

[KaylaGoodman]

Hi @Chris_Hofer ,

Thank you for your reply! My coding looks like the copied code below. I don't have the class as "enhanceable_content accordion" or use href="#". I have used those to create tabs before, but because they didn't render in an ipad, I switched to the dropdown accordion menus. When I checked with students yesterday, two subjects can see Canvas without issue and the other two cannot. I will look at the link you posted and see if it will help! Thanks again for reaching out.

<hr style="border-top: 4px solid #8c8b8b; margin: 10px auto;" />
<div style="padding: 10px; background-color: #f7f7f3; color: black; margin-bottom: 10px; max-width: 800px; text-align: left;">
<details>
<summary style="cursor: pointer; background-color: #ad343e; color: white; padding: 5px; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 24pt;">Calendars</summary>
<div style="border: thin solid #F1F3F4; padding: 5px;">
<details>
<summary style="cursor: pointer; background-color: #8d2a32; color: white; padding-left: 10px; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt;">A-Day</summary>
<p><iframe title="embedded content" src="https://docs.google.com/document/d/e/2PACX-1vQLkymrfGktvvr6s0XcbMdL5lcwjN6Of7L1ysn6FLdoFgUkRDfs5s1nl..." width="750px" height="700px"></iframe></p>
</details>
<details>
<summary style="cursor: pointer; background-color: #f6c665; color: black; padding-left: 10px; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt;">B-Day</summary>
<p><iframe title="embedded content" src="https://docs.google.com/document/d/e/2PACX-1vQm6C9-PDp7bMgl3jvvhbi6qbVhE1IphKLmt0smV9HCvyGOqRbFcnyvT..." width="750px" height="700px"></iframe></p>
</details>
</div>
</details>
</div>