Add the set_html_id template tag to resolve the random html.id attribute.

Author: zbohm

djangocms_frontend/contrib/accordion/templates/djangocms_frontend/bootstrap5/accordion.html

@@ -1,5 +1,5 @@
 {% load cms_tags frontend %}
-<{{ instance.tag_type }}{{ instance.get_attributes }} id="parent-{{ instance.uuid }}">
+<{{ instance.tag_type }}{{ instance.get_attributes }} {% set_html_id instance as html_id %}id="parent-{{ html_id }}">
     {% for plugin in instance.child_plugin_instances %}
         {% with parentloop=forloop parent=instance %}{% render_plugin plugin %}{% endwith %}
     {% empty %}{% user_message _("Add accordion items here") %}

djangocms_frontend/contrib/accordion/templates/djangocms_frontend/bootstrap5/accordion_item.html

@@ -1,16 +1,16 @@
 {% load cms_tags frontend %}
 {% spaceless %}
-    <div class="accordion-item">
+    <div class="accordion-item">{% set_html_id instance as html_id %}
         <{{ parent.accordion_header_type|default:"h2" }} class="accordion-header"
-        id="heading-{{ instance.uuid }}"><button
+            id="heading-{{ instance.html_id }}"><button
             class="accordion-button{% if not instance.accordion_item_open %} collapsed{% endif %} {{ instance.font_size }}"
             type="button"
             data-bs-toggle="collapse"
-            data-bs-target="#item-{{ instance.uuid }}"
+            data-bs-target="#item-{{ instance.html_id }}"
             aria-expanded="{{ instance.accordion_item_open|lower }}"
-            aria-controls="item-{{ instance.uuid }}">{% inline_field instance "accordion_item_header" %}</button>
+            aria-controls="item-{{ instance.html_id }}">{% inline_field instance "accordion_item_header" %}</button>
     </{{ parent.accordion_header_type|default:"h2" }}>
-    <{{ instance.tag_type }}{{ instance.get_attributes }} id="item-{{ instance.uuid }}" aria-labelledby="heading-{{ instance.uuid }}" data-bs-parent="#parent-{{ parent.uuid }}">
+    <{{ instance.tag_type }}{{ instance.get_attributes }} id="item-{{ instance.html_id }}" aria-labelledby="heading-{{ instance.html_id }}" data-bs-parent="#parent-{{ parent.html_id }}">
     <div class="accordion-body">{% endspaceless %}
         {% with parent=instance %}
             {% for plugin in instance.child_plugin_instances %}

djangocms_frontend/contrib/collapse/templates/djangocms_frontend/bootstrap5/collapse-container.html

@@ -2,7 +2,7 @@
 <{{ instance.tag_type }}{{ instance.get_attributes }}
     id="{{ instance.container_identifier }}"
     role="tabpanel"
-    data-bs-parent="#collapse-{{ parent.uuid }}"
+    data-bs-parent="#collapse-{{ parent.html_id }}"
     aria-labelledby="trigger-{{ instance.container_identifier }}">
     {% for plugin in instance.child_plugin_instances %}
         {% with forloop as parentloop %}{% render_plugin plugin %}{% endwith %}

djangocms_frontend/contrib/collapse/templates/djangocms_frontend/bootstrap5/collapse.html

@@ -1,6 +1,6 @@
 {% load cms_tags frontend %}
 <{{ instance.tag_type }}{{ instance.get_attributes }}
-id="collapse-{{ instance.uuid }}"
+{% set_html_id instance as html_id %}id="collapse-{{ html_id }}"
 data-bs-children="{{ instance.collapse_siblings }}"
 role="tablist"
 >

djangocms_frontend/models.py

@@ -1,5 +1,3 @@
-import uuid
-
 from cms.models import CMSPlugin
 from django.core.serializers.json import DjangoJSONEncoder
 from django.db import models
@@ -48,7 +46,7 @@ class Meta:
 
     def __init__(self, *args, **kwargs):
         self._additional_classes = []
-        self.uuid = str(uuid.uuid4())
+        self.html_id = None  # HTML id attribute will be set in template tag set_html_id.
         super().__init__(*args, **kwargs)
 
     def __getattr__(self, item):

djangocms_frontend/templatetags/frontend.py

@@ -20,6 +20,7 @@
 from djangocms_frontend import settings
 from djangocms_frontend.fields import HTMLsanitized
 from djangocms_frontend.helpers import get_related_object as related_object
+from djangocms_frontend.models import FrontendUIItem
 
 register = template.Library()
 
@@ -73,6 +74,17 @@ def get_attributes(attribute_field, *add_classes):
     return mark_safe(" ".join(attrs))
 
 
+@register.simple_tag(takes_context=True)
+def set_html_id(context: template.Context, instance: FrontendUIItem) -> str:
+    if instance.html_id is None:
+        request = context["request"]
+        key = "frontend_plugins_counter"
+        counter = getattr(request, key, 0) + 1
+        instance.html_id = f"frontend-plugins-{counter}"
+        setattr(request, key, counter)
+    return instance.html_id
+
+
 @register.filter
 def get_related_object(reference):
     return related_object(dict(obj=reference), "obj")