[Shop][2.0] Added the ability to render the accordion component that’s expanded by default (#17482)

| Q               | A
|-----------------|-----
| Branch?         | 2.0
| Bug fix?        | no
| New feature?    | yes
| BC breaks?      | no
| Deprecations?   | no
| Related tickets | -
| License         | MIT

Added the ability to render the accordion component that’s expanded by
default.

Make accordion component with details section expanded by default on
product show page.

![Screenshot from 2024-11-18
23-13-46](https://github.com/user-attachments/assets/5abd1137-5a1a-4d51-84aa-70b4cd47f659)

src/Sylius/Bundle/ShopBundle/templates/product/show/content/info/overview/accordion/details/content.html.twig

@@ -1,6 +1,6 @@
 {% set product = hookable_metadata.context.product %}
 
-{% embed '@SyliusShop/shared/accordion/accordion_item_content.html.twig' with { accordion_item_id: 'details', test_html_attribute: 'product-details' } %}
+{% embed '@SyliusShop/shared/accordion/accordion_item_content.html.twig' with { accordion_item_id: 'details', expanded: true, test_html_attribute: 'product-details' } %}
     {% block accordion_item_content %}
         {% if product.description is not empty %}
             {{ product.description | nl2br }}
@@ -9,4 +9,3 @@
         {% endif %}
     {% endblock %}
 {% endembed %}
-

src/Sylius/Bundle/ShopBundle/templates/product/show/content/info/overview/accordion/details/title.html.twig

@@ -1,6 +1,5 @@
-{% embed '@SyliusShop/shared/accordion/accordion_item_title.html.twig' with { accordion_item_id: 'details' } %}
+{% embed '@SyliusShop/shared/accordion/accordion_item_title.html.twig' with { accordion_item_id: 'details', expanded: true } %}
     {% block accordion_item_title %}
         {{ 'sylius.ui.details'|trans }}
     {% endblock %}
 {% endembed %}
-

src/Sylius/Bundle/ShopBundle/templates/shared/accordion/accordion_item_content.html.twig

@@ -1,4 +1,4 @@
-<div id="{{ accordion_item_id }}" class="accordion-collapse collapse">
+<div id="{{ accordion_item_id }}" class="accordion-collapse collapse {{ expanded|default(false) ? 'show' : '' }}">
     <div class="accordion-body" {{ test_html_attribute is defined ? sylius_test_html_attribute(test_html_attribute) : '' }}>
         {% block accordion_item_content %}
         {% endblock %}

src/Sylius/Bundle/ShopBundle/templates/shared/accordion/accordion_item_title.html.twig

@@ -1,9 +1,8 @@
 <h2 class="accordion-header">
-    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ accordion_item_id }}" aria-expanded="false" aria-controls="{{ accordion_item_id }}">
+    <button class="accordion-button {{ expanded|default(false) ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ accordion_item_id }}" aria-expanded="{{ expanded|default(false) ? 'true' : 'false' }}" aria-controls="{{ accordion_item_id }}">
             <span class="h5 mb-0 py-2">
                 {% block accordion_item_title %}
                 {% endblock %}
             </span>
     </button>
 </h2>
-