HTML Coding for on Page Navigation

[oneilllj]

Hi all, 

I have had a page working for some time now (well until today) where I could click on an image or button at the top of the page and it would go to a link on page. Admittedly, this link was through an accordion set up, but it worked.

Today, I have noticed that all the links are not working as they used to. From a quick CoPilot review it seems as though Canvas may not allow the linking in accordion menus anymore - even with the correct coding!

Has anyone else experienced this issue and how did you resolve it?

Thanks

Jen

[JeffCampbell]

Could you share a screenshot of the accordion menu you have, and possibly the HTML code as well? I've seen several different ways to set things up that mimic accordion style options. I would like to try and test what you are doing on my end to see if I am experiencing the same issue.

Is the link an internal or external link?

[James]

@oneilllj 

Canvas announced the deprecation of jQuery UI accordions back in late 2016 / early 2017, so we don't know which method you're using. Given that it was working until recently, I would question the links more than the accordions themselves. That's where @JeffCampbell suggests seeing how you have it setup.

I would ask if you made any changes to the pages recently? This is especially the case if the accordion still works but certain links do not. For those, do the id's still exist. The id attribute cannot have spaces in them. For example, if you used to have an id="this link" (with a space), when you save the page, Canvas removes the space and it becomes id="thislink". However, if you had the href="#this link" with a space, it gets converted to href="#this%20link" (the %20 is an encoded space) and doesn't match the identifier, so it doesn't jump to that spot.

If that isn't the case, then another question would it works in some browsers but not others (Firefox vs Chrome, or Safari vs Chrome, but not Edge vs Chrome)?

[oneilllj]

Hi Jeff and James,

Thanks for your help. I have gone back to an older course where I had the same page set up and it isn't working any more either (just in case the recent changes I made to the current page were the cause). 

Essentially, I used to be able to click on one of the images and it would open the on-page link within the accordion menu. Now, when I click on an image, it only opens to the main details accordion and not the correct link. 

I am fairly confident I have all the href and id links correct (but please check in the code below as well), because I have a different but similar set up in another course where I have nav buttons with a href that link to a heading/section that contains the id. 

I will also give the different browsers a go, I really only use Edge.

Any ideas or suggestions would be appreciated.

Thanks

Jen

HTML CODE - THE IMAGES WON'T WORK THOUGH

<table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 100%; background-color: #fdc82f;"><img id="402513" src="https://XXXX" alt="Canvas basics.png" width="100%" height="100%" data-api-endpoint="https://XXXX" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%; height: 10px; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr style="height: 103px;">
<td style="width: 100%; background-color: #fdc82f; text-align: center; vertical-align: middle; height: 10px;" colspan="4">
<h2><strong><span style="color: #13469b;">CLICK ON THE BUTTONS BELOW FOR MORE INFORMATION</span></strong></h2>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto; height: 60px;">
<tbody>
<tr>
<td style="width: 24.9865%; text-align: center;"><a href="#assignments"><img id="402522" src="https://XXX" alt="Assignments.png" width="400" height="160" data-api-endpoint="XXX" data-api-returntype="File" /></a></td>
<td style="width: 24.9865%; text-align: center;"><a href="#annotate"><img src="https://XXX" alt="Annotating and marking (1).png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" /></a></td>
<td style="width: 24.9865%; text-align: center;"><a href="#blueprint-standards"><img id="402523" src="https://XXX" alt="BluePrint Stds.png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" /></a></td>
<td style="width: 24.9865%; text-align: center;"><a href="#canvas-101"><img id="402517" src="https://XXX" alt="Canvas 101.png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" /></a></td>
</tr>
</tbody>
</table>
<details>
<summary style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 28pt; cursor: pointer;"><span style="font-size: 18pt;"><strong>CANVAS BASICS INFORMATION</strong></span></summary>
<details>
<summary id="assignments" style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;">Assignments</summary>
<p>Assignments outlines how to set up your courses including:</p>
<ul>
<li>marking policy set up;</li>
<li>marking;</li>
<li>drafts;</li>
<li>downloading/uploading submissions</li>
</ul>
<p style="text-align: center;"><span><a href="#top">Jump to Top</a></span></p>
</details>
<details>
<summary id="annotate" style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;"><strong>Annotating and Marking</strong></summary>
<p>This video will provide information on the different options for annotating student work in Canvas, along with marking with rubrics.</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="#top"><span>Jump to Top</span></a></p>
</details>
<details>
<summary id="blueprint-standards" style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;"><strong>BluePrint Standards</strong></summary>
<p><span>BluePrint Standards provide a snapshot on the various standards the College has set for its course standards.&nbsp;</span></p>
<p style="text-align: center;"><a href="#top"><span>Jump to Top</span></a></p>
</details>
<details>
<summary id="canvas-101" style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;"><strong>Canvas 101</strong></summary>
<p>Canvas 101 will provide basic information about:</p>
<ul>
<li>dashboard;</li>
<li>file uploads;</li>
<li>creating pages;</li>
<li>linking pages;</li>
<li>buttons</li>
</ul>
<p style="text-align: center;"><span><a href="#top">Jump to Top</a></span></p>
</details>
</details>

[James · Accepted solution]

@oneilllj 

This actually works for me in Chrome, which Edge is essentially the same -- provided that I have my screen narrow enough and short enough that it actually needs to jump to view it.

That is, if the content is already visible on the screen, it doesn't jump.

However, in none of my clicks did it expand something that isn't already expanded. I don't think that's what you want.

What did work, as far as what I think you're after, is to move the destination ID into the item within the summary rather than on the summary element itself.

This did not auto-expand:

    <details>
        <summary id="blueprint-standards" style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;"><strong>BluePrint Standards</strong></summary>
        <p><span>BluePrint Standards provide a snapshot on the various standards the College has set for its course standards.&nbsp;</span></p>
        <p style="text-align: center;"><a href="#top"><span>Jump to Top</span></a></p>
    </details>

This did auto-expand:

    <details>
        <summary style="color: #13469b; font-family: 'arial black', 'avant garde'; font-size: 12pt; cursor: pointer;"><strong>BluePrint Standards</strong></summary>
        <p id="blueprint-standards"><span>BluePrint Standards provide a snapshot on the various standards the College has set for its course standards.&nbsp;</span></p>
        <p style="text-align: center;"><a href="#top"><span>Jump to Top</span></a></p>
    </details>

Furthermore, this expansion works even if my screen isn't stretched really narrow and short.

[JeffCampbell]

@James I saw this same thing and wondered if that might be the issue.

@oneilllj This issue may be related to a browser change, or a combination of browser rendering and recent Canvas update. Many browsers don’t treat an ID placed directly on a <summary> element as a normal anchor. In particular, Chrome-based browsers often don’t recognize it as a valid scroll target and there are reports of inconsistent behavior related to this over the last several years. I find anecdotal references suggesting a browser update this year may have resurfaced the issue. 

One other thing I noticed from your code and images is the use of nested accordions. You have an accordion for “Canvas Basics Information” that expands to show several more accordions inside. If that’s the only main section on the page, you might consider converting that outer accordion into a heading instead. Even if there are others, you might consider headings for each, with a list of accordions inside. While the issue James mentioned is the most likely cause, nested accordions can sometimes introduce unpredictable rendering or scrolling behavior. Since Canvas does limit what is allowed and not allowed for HTML elements, it could cause an issue.

Follow James' suggestion first. Consider testing the nested accordions on a test page if still having issues.

[oneilllj]

Hi @James and @JeffCampbell 

Thank you both for your help. I agree that there has been an update along the way which has not helped my coding issue.

However, @James by adding the id code into the <p> seems to have solved my problem, as I want it to auto expand. Thanks for helping me solve the problem!

Jen