Include some Bootstrap examples as TinyMCE templates.

[MrTango]

Some examples from https://getbootstrap.com/docs/5.0/examples/:

• https://getbootstrap.com/docs/5.0/examples/heroes/
• https://getbootstrap.com/docs/5.0/examples/features/
• https://getbootstrap.com/docs/5.0/examples/pricing/
• some simple Card examples, one Card, Tow Cards, Three Cards

[yurj]

we have developed an accordion template (need a js to make it close by default), some group cards.

[1letter]

@yurj I will implement the accordion as tinymce template and search a solution. my first idea:

• multiple accordions should be possible (id problem)
• add templates to tinymce for accordion 1..n items
• all accordion items in the editor opened by default
• a html transform deliver the accordions with an unique "id" and closed panels in the view mode

can you tell me about your solution?

[yurj]

Hi! It was the collapsible element and not the accordion, sorry. Here the template:

<div class="accordion accordion-flush accordion-tmpl" id="acc">
  <div class="accordion-item">
    <div class="accordion-header" id="acc-head">
      <button type="button" class="accordion-button collapsed" id="accordion-button-mce" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse-acc"><strong>Title</strong></button>
    </div>
    <div id="collapse-acc" class="accordion-collapse collapse" aria-labelledby="acc-head">
      <div class="accordion-body">
        <p>Here the content</p>
      </div>
    </div>
  </div>
</div>
<br /><br />

on the theme javascript:

(function($) {
  'use strict'; // Start of use strict

  $(document).ready(function() {

    // TinyMCE accordion template
    var collapseElementList = [].slice.call(document.querySelectorAll('#accordion-button-mce'));
    var collapseList = collapseElementList.map(function (collapseEl) {      
      $(collapseEl).on('click', function() {
        $(this).toggleClass('collapsed');  // toggle the icon
        $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? false : true);
        var el = $(this).parents().next('div.accordion-collapse.collapse');
        return new bootstrap.Collapse(el, {
          toggle: true
        });
      });
    });
 });

})(jQuery);

We don't need different ids, the problem was that in edit the collapsible was closed, so it was not possible to edit the content.

[1letter]

@yurj thanks for hint. i will adapt this for my use case and report back.