fix(js): dropdown omits non-p elements (#423)

AdvisorySG · Dec 20, 2024 · ad327a8 · ad327a8
1 parent e57cf21
commit ad327a8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ For the homepage and separate [Stories](https://beta.advisory.sg/stories) page t
 
 # PostCSS Features Used
 
--   Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
+- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
 
 # Copyright & License
 

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -605,28 +605,30 @@ function contentDropdown() {
     }
     $('div.single-content h2').each(function () {
         var $header = $(this);
+        var $container = $('<div class="dropdown-content"></div>');
         var $nextElement = $header.next();
-        var $pContainer = $('<div class="dropdown-content"></div>');
-        var $pElements = [];
+        var $curElement = $nextElement;
         var $arrowIcon = $('<span class="arrow-icon">\u25B8</span>');
-        while ($nextElement.is('p')) {
-            $pElements.push($nextElement);
+        while (
+            $nextElement.length &&
+            !$nextElement.is('h1') &&
+            !$nextElement.is('h2')
+        ) {
+            $curElement = $nextElement;
             $nextElement = $nextElement.next();
+            $container.append($curElement);
         }
-        $pElements.forEach(function ($pElement) {
-            $pContainer.append($pElement);
-        });
 
-        if ($pContainer.length > 0) {
+        if ($container.length > 0) {
             // Add the dropdown-header class to the h2 element
             $header.addClass('dropdown-header');
             $header.prepend($arrowIcon);
             // Hide the entire container and insert it after h2
-            $pContainer.hide().insertAfter($header);
+            $container.hide().insertAfter($header);
 
             // Add a click event listener to the h2 element to toggle the container
             $header.on('click', function () {
-                $pContainer.slideToggle();
+                $container.slideToggle();
                 if ($arrowIcon.text() === '\u25B8') {
                     $arrowIcon.text('\u25B4');
                 } else {