Make <detail> <summary> elements editable within Brightspace Editor

Arman.V.176
Arman.V.176 Posts: 29 🌱

The HTML templates contain Bootstrap accordion elements. Nowadays, one can create such accordions with multiple <details> elements. More info on the webdev page: https://developer.chrome.com/docs/css-ui/exclusive-accordion 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

Tagged:

Answers

  • Olly.F.893
    Olly.F.893 Posts: 71
    edited May 22

    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.

  • Arman.V.176
    Arman.V.176 Posts: 29 🌱
    edited May 30

    @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

  • Olly.F.893
    Olly.F.893 Posts: 71

    Hi Arman. I'll let them know that it's still an issue for you.

  • Arman.V.176
    Arman.V.176 Posts: 29 🌱

    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