1712: Added “Collapse all steps” link on step by step

itk-dev · Jul 5, 2024 · a01a0aa · a01a0aa
1 parent e734505
commit a01a0aa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/...loop_theme/templates/content-entities/paragraph--os2loop-documents-step-by-step.html.twig b/...loop_theme/templates/content-entities/paragraph--os2loop-documents-step-by-step.html.twig
@@ -47,16 +47,14 @@
   ]
 %}
 {% block paragraph %}
-  {% set paragraph_id = 'p-' ~ paragraph.id.value %}
+  {% set paragraph_id = 'paragraph-id-' ~ paragraph.id.value %}
   {% set expanded = app.request.query.get('expanded') %}
   <div{{ attributes.addClass(classes) }} id="{{ paragraph_id }}">
     {{ content.contextual_links }}
     {{ include('@os2loop_theme/content-entities/os2loop_documents_title.html.twig') }}
     {{ content.os2loop_documents_description }}
 
-    {% if not expanded %}
-      <a class="btn btn-link os2loop-expand" href="{{ path('<current>', {expanded: not expanded}, {fragment: paragraph_id}) }}">{{ 'Expand all steps'|trans }}</a>
-    {% endif %}
+    <a class="btn btn-link os2loop-expand" href="{{ path('<current>', {expanded: not expanded}, {fragment: paragraph_id}) }}">{{ expanded ? 'Collapse all steps'|trans : 'Expand all steps'|trans }}</a>
 
     <ol class="os2loop-documents-steps">
       {{ content.os2loop_documents_steps }}

diff --git a/...emes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig b/...emes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig
@@ -53,7 +53,6 @@
 
 {% set expanded = app.request.query.get('expanded') %}
 {% set class_collapsed = not expanded ? 'collapsed' %}
-{% set class_collapse = not expanded ? 'collapse' %}
 
 {% block paragraph %}
   {% block content %}
@@ -66,13 +65,13 @@
           </span>
         </span>
       {% else %}
-        <a class="{{ class_collapsed }} step--collapse-toggle" type="button" data-toggle="{{ class_collapse }}" data-target="#paragraph-id-{{ paragraph.id() }}">
+        <a class="{{ class_collapsed }} step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
           <span class="bold {{ has_title ? 'line-clamp-1' }}">
             {{ has_title ? content.os2loop_documents_step_title : content.os2loop_documents_step_text }}
           </span>
         </a>
       {% endif %}
-      <div class="row no-gutters {{ class_collapse }}" id="paragraph-id-{{ paragraph.id() }}">
+      <div class="row no-gutters collapse {{ expanded ? 'show' }}" id="paragraph-id-{{ paragraph.id() }}">
         <div class="col">
           <div class="row no-gutters">
             <div class="col">