Merge pull request #6174 from OCHA-DAP/bugfix/HDX-9457-fix-inline-nav…

…-links HDX-9457 fix inline links & make cards initially collapsed
OCHA-DAP · Jan 2, 2024 · 497d23f · 497d23f
2 parents 8f716cb + 0bf9ca6
commit 497d23f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/faq_others/devs/main.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/faq_others/devs/main.html
@@ -57,10 +57,10 @@
 {% block secondary %}
     <div id="hdx-faq-sidebar-wrapper" class="mTop60">
         <div class="hdx-faq-sidebar" id="hdx-faq-sidebar">
-            <ul class="nav">
+            <ul class="nav flex-column">
             {% for section in data.faq_data %}
-                <li>
-                    <a id='menu-{{ section.id }}' href="#body-{{ section.id }}"> {{ section.title }} </a>
+                <li class="nav-item">
+                    <a id='menu-{{ section.id }}' class_='nav-link' href="#body-{{ section.id }}"> {{ section.title }} </a>
                 </li>
             {% endfor %}
             </ul>

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/faq_others/devs/questions_sections.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/faq_others/devs/questions_sections.html
@@ -1,21 +1,21 @@
-
 {% for section in data %}
     <p class="mTop30 mBottom15">
         <div class="section-flag" id='body-{{ section.id }}' > {{ section.title }} </div>
     </p>
     <div class="hdx-card-group" id="accordion-{{ section.id }}" role="tablist" aria-multiselectable="false">
         {% for question in section.questions %}
-            {% set q_id = 'auto-%s-%s-q' | format(section.id, question.id) %}
-            {% set a_id = 'auto-%s-%s-a' | format(section.id, question.id) %}
+            {% set q_id = 'auto-%s-%s-q' | format(section.id, loop.index) %}
+            {% set a_id = 'auto-%s-%s-a' | format(section.id, loop.index) %}
             <div class="card">
-                <div class="card-header" id="{{ q_id }}">
+                <div class="card-header" role="tab" id="{{ q_id }}">
                     <h4 class="card-title">
-                        <span class="faq-question-link">
+                        <a role="button" data-bs-toggle="collapse" data-bs-parent=".hdx-card-group" href="#{{ a_id }}"
+                           aria-expanded="false" aria-controls="{{ a_id }}" class="faq-question-link">
                             {{ question.q | safe }}
-                        </span>
+                        </a>
                     </h4>
                 </div>
-                <div id="{{ a_id }}" >
+                <div id="{{ a_id }}" class="panel-collapse collapse faq-panel-collapse" role="tabpanel" aria-labelledby="{{ q_id }}">
                     <div class="card-body">
                         {{ question.a | safe }}
                     </div>