Hiding HTML code using the "<!---" tag

[james_botten]

I'm hoping to use the "<!---" and "--->" tags to hide text in a webpage template so that it can be reused for multiple purposes.  When editing a page in Canvas using the HTML code view, the code after the "<!---" tag is grayed out as expected and when viewing the saved page the relevant text is hidden.

However it seems this hidden text is actually deleted, as when the page is re-opened for editing, all the relevant HTML code between the "<!---"/"--->" tags is simply not there. 

I know I can store multiple pages as templates, but I'd prefer to have the flexibility of working with fewer templates that have hidden code snippets to reactivate as needed.

Is this a glitch or is there some specific reason for the "<!---" tag working this way?

[Chris_Hofer · Accepted solution]

Good evening, @james_botten ...

I don't think it's a glitch.  There are only certain HTML elements that are allowed in the Canvas RCE (Rich Content Editor).  You can read more about this by checking out the following PDF file in this Guide: Canvas HTML Editor Allowlist PDF - Instructure Community (canvaslms.com).

Hope this helps a bit.

[james_botten]

Thanks @Chris_Hofer, I didn't realise some tags were not allowed.

Appreciate the heads up.

Cheers
Jamie

[thomasb2]

It used to work - a year or more ago.  With one of the updates (maybe the new Rich Text Editor?) it stopped being possible. 

[mginda]

This isn't a helpful feature. It's a bug. When I am building pages I should be able to hide elements I for testing. Instead, this erases work and adds labor to my day for no good reason.

[Chris_Hofer]

@mginda ...

I understand what you are saying, but for reasons that I'm not completely aware of, Instructure only allows specific HTML codes in the RCE (Rich Content Editor)...as noted in the link that I had previously posted above.  I would not consider this a bug...as this is "by design".  What you could do is submit an idea to the "Ideas and Themes" space here in the Community asking to request more flexibility to include hidden elements in the HTML editor of the RCE.  You can do this by following the Guides under the heading "Ideas and Themes" located here: Instructure Community Guide - Instructure Community (canvaslms.com).

Sorry I don't have better news for you, but I hope this will be helpful in some way.

[WatsonWork]

Another option is to use CSS functionality.

You can also achieve the "hiding" by using CSS display:none. This isn't removed in Canvas and allows HTML blocks (span, img, a, div...) to be hidden from view - but still accessible if you want to reactivate at a latter time.

The content is still viewable if a person uses View Source (or the like) as the content is still in the HTML.

This is commonly used in JS to make things appear but doesn't have to be JS controlled. I wanted an IMG to not be viewable for a short period of time, but want it to reappear after week 2 or 3. You can thing wither take out the style or set it to inline/block etc.

[karen_bowden]

This does not appear to work either. I used the code from the webpage provided. Or is it supposed to be something else? I will continue to search for a solution. But this was a good try.

h1.hidden {
  display: none;
}

[chriscas]

Hi @karen_bowden ,

The code on the website is some generic examples.  What exactly are you trying to hide?

In Canvas, you'd use inline styles.  So if you wanted to hide a line of text, you'd add the style option to a paragraph element something like below:

<p style="display: none;">This text should be hidden for users...</p>

Hope this helps!

-Chris

[karen_bowden]

Thank you! I also found that the html tags work, too.