Replace pma-auto-slider with Bootstrap's collapse

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

1 files changed, 10 insertions, 3 deletions

diff --git a/templates/display/results/table.twig b/templates/display/results/table.twig
index 349c713309..6eafb751df 100644
--- a/templates/display/results/table.twig
+++ b/templates/display/results/table.twig
@@ -103,9 +103,14 @@
       'display_options_form': 1
     }) }}
 
-    <div{% if default_sliders_state != 'disabled' -%}
-      {{- default_sliders_state == 'closed' ? ' style="display: none; overflow:auto;"' }} class="pma_auto_slider" title="{% trans 'Options' %}"
-    {%- endif %}>
+    {% if default_sliders_state != 'disabled' %}
+    <div class="mb-3">
+      <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#extraOptions" aria-expanded="{{ default_sliders_state == 'open' ? 'true' : 'false' }}" aria-controls="extraOptions">
+        {% trans 'Extra options' %}
+      </button>
+    </div>
+    <div class="collapse mb-3{{ default_sliders_state == 'open' ? ' show' }}" id="extraOptions">
+    {% endif %}
 
       <fieldset class="pma-fieldset">
         <div class="formelement">
@@ -174,7 +179,9 @@
       <fieldset class="pma-fieldset tblFooters">
         <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
       </fieldset>
+    {% if default_sliders_state != 'disabled' %}
     </div>
+    {% endif %}
   </form>
 {% endif %}