Make <detail> <summary> elements editable within Brightspace Editor
The HTML templates contain Bootstrap accordion elements. Nowadays, one can create such accordions with multiple <details> elements. More info on the webdev page: These <details> elements are now native to (almost) all browsers. I can create accordion-like behaviour (both exclusive and inclusive) using the <details> element. They function perfectly within Brightspace.
However, when I want to edit these elements with the Brightspace Editor these elements except for the first panel are closed and I can only make edits to the contents of the closed by going directly to the source code. As you can see in the attached image This is a bridge too far for most teachers at our institution.
Can someone point towards a solution by which The <details> and connected <summary> elments are all open when the page is in Edit mode within Brightspace. Similar to the Bootstrap accordions that come with the HTML templates. These panels are always open in Edit mode, as you can see in the attached image.
Kind regards,
Arman
Answers
-
Hi Arman. I'm not sure if you've found a solution to this since posting here, but I'm going to bring it to the attention of your Customer Success Manager. I've seen versions of these kinds of templates where the accordion items are already expanded in the Brightspace editor (so you don't need to edit them in the source code), but I'm not sure what exactly differs in the templates where that's possible.
UPDATE: Sounds like you did get a solution! Glad it was sorted for you.
-
@Olly.F.893 Dear Olly, thanks for your response. Unfortunataly, I didn't find a soluton yet. I cannot get the details summary elments to open when I'm using the HTML Editor. I guess, it's related to the TinyMCE editor Brightspace uses, but actually I'm not sure. Of course, I can edit them when I go to the source code directly, which works fine, but I cannot expect teachers to do this as well. I would be very grateful, if you can indeed relay this problem/question to your Customer Success Manager.
Kind regards,
Arman
-
Hi Arman. I'll let them know that it's still an issue for you.
-
An update: A variation of the accordion pattern is the inclusive accordion, in which all of the disclosure widgets can be opened at the same time. For this type of accordion made with the HTMl elments <details> and <summary> is is completetly editable when I put the HTML page in edit mode. However, for another variation of the accordion pattern, the exclusive accordion, in which only one of the disclosure widgets can be opened at the same time, its accordion elments cannot be directly edited in Edit mode. For this variation I have to manipulate the HTML code directly to make changes.
Kind regrds,
Arman
-
An update!
The accordion-like elements which I create using the <details> and <summary> elements are editable within the Brightspace Editor, as long as it's an inclusive accordion, as shown in image 1. In an inclusive accordion all of the
disclosure widgets can be open at the same time.
For the exclusive accordion variation, in which only one of the disclosure widgets can be open at the same time, only one of the panels can be edited directly using the Brightspace editor, as shown in image 2. If you want to edit the other one(s), you have to do this directly within the source code.
To create an exclusive accordion you add a <name> attribute to the <details> elements. When this attribute is used, multiple <details> elements that have the same name value form a semantic group and they will behave as an exclusive accordion. When you open one of the <details> elements from the group, the previously opened one will automatically close.
It works fine in Brightspace, except for that only one panel can be edited directly using the Brightspace editor
Did D2L already found a solution to this problem? It would be of great advantage to our teachers, if they don't have to delve into the source code ;)
I also found a related problem. You can also force a panel to be open on page load by using the <open> attribute of that <details> element. Again this works perfectly for the inclusive accordion variant (image 3), but sadly :( not for the exclusive accorion variant, as shown in image 4. I noticed that for the exclusive accordion the <open> attribute is removed. Does this relate to the <name> attribute also being present on this <details> element.
It would be great, if the accordions, inclusive and exclusive, build with the <details> and <summary> elements would function as expected within the Brightspace LMS.
Kind regards,
Arman
-
Update: If you use an exclusive accordion build with the <details> and <summary> elements, you can't use the open attribute. This explains why you can't force a disclosure widget to open on page load in the exclusive accordion variant :)
"The group of elements that is created by a common name attribute is exclusive, meaning that at most one of the details elements can be open at once. While this exclusivity is enforced by user agents, the resulting enforcement immediately changes the open attributes in the markup. This requirement on authors forbids such misleading markup." (Source: The details element (WHATWG community))
