add a drop-down per course section

index.html

@@ -47,13 +47,18 @@
             <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Learning Path</h2>
             
             <div class="mb-12">
-                <h3 class="text-xl font-semibold text-gray-800 mb-4">Foundational Courses</h3>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold text-gray-800">Foundational Courses</h3>
+                    <button class="toggle-section-btn" data-section="foundational">
+                        <i data-feather="chevron-down" class="text-gray-600"></i>
+                    </button>
+                </div>
+                <div id="foundational-section" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                     <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                         <h4 class="font-medium text-green-600">MDB100</h4>
                         <p class="text-gray-600">MongoDB Database and Security</p>
                     </div>
-                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                         <h4 class="font-medium text-green-600">MDB200</h4>
                         <p class="text-gray-600">MongoDB Optimization and Performance</p>
                     </div>
@@ -63,13 +68,22 @@
                     </div>
                 </div>
             </div>
-
             <div class="mb-12">
-                <h3 class="text-xl font-semibold text-gray-800 mb-4">Role-Focused Courses</h3>
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold text-gray-800">Role-Focused Courses</h3>
+                    <button class="toggle-section-btn" data-section="role-focused">
+                        <i data-feather="chevron-down" class="text-gray-600"></i>
+                    </button>
+                </div>
                 
-                <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-2">Developer and Data Architect</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div id="role-focused-section">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">Developer and Data Architect</h4>
+                        <button class="toggle-subsection-btn" data-subsection="developer-data-architect">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-blue-600">DEV400</h4>
                             <p class="text-gray-600">MongoDB Developer Extension</p>
@@ -84,10 +98,13 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-2">Developer Advanced</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">Developer Advanced</h4>
+                        <button class="toggle-subsection-btn" data-subsection="developer-advanced">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-purple-600">DA610</h4>
                             <p class="text-gray-600">MongoDB Adv. Queries</p>
@@ -110,10 +127,13 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-2">AI Developer</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">AI Developer</h4>
+                        <button class="toggle-subsection-btn" data-subsection="ai-developer">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-indigo-600">DS110</h4>
                             <p class="text-gray-600">MongoDB Atlas Search & Vector Search</p>
@@ -128,10 +148,13 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-2">Atlas Admin / DevOps</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">Atlas Admin / DevOps</h4>
+                        <button class="toggle-subsection-btn" data-subsection="atlas-admin">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-red-600">OFA400</h4>
                             <p class="text-gray-600">Atlas Admin</p>
@@ -154,10 +177,13 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-2">Database Admin / DevOps</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">Database Admin / DevOps</h4>
+                        <button class="toggle-subsection-btn" data-subsection="db-admin">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-orange-600">OFS400</h4>
                             <p class="text-gray-600">Ops Manager Admin</p>
@@ -180,10 +206,13 @@
                         </div>
                     </div>
                 </div>
-
-                <div>
-                    <h4 class="font-medium text-gray-700 mb-2">Security - CSFLE</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-medium text-gray-700">Security - CSFLE</h4>
+                        <button class="toggle-subsection-btn" data-subsection="security">
+                            <i data-feather="chevron-down" class="text-gray-600"></i>
+                        </button>
+                    </div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                             <h4 class="font-medium text-teal-600">DS130</h4>
                             <p class="text-gray-600">Client-Side Field Level Encryption</p>
@@ -277,12 +306,48 @@
     </main>
 
     <custom-footer></custom-footer>
-
     <script>
         feather.replace();
         
+        // Toggle section functionality
+        document.querySelectorAll('.toggle-section-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const sectionId = btn.getAttribute('data-section');
+                const section = document.getElementById(`${sectionId}-section`);
+                const icon = btn.querySelector('i');
+                
+                if (section.classList.contains('hidden')) {
+                    section.classList.remove('hidden');
+                    icon.setAttribute('data-feather', 'chevron-up');
+                } else {
+                    section.classList.add('hidden');
+                    icon.setAttribute('data-feather', 'chevron-down');
+                }
+                feather.replace();
+            });
+        });
+
+        // Toggle subsection functionality
+        document.querySelectorAll('.toggle-subsection-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const subsection = btn.getAttribute('data-subsection');
+                const content = btn.closest('div').nextElementSibling;
+                const icon = btn.querySelector('i');
+                
+                if (content.classList.contains('hidden')) {
+                    content.classList.remove('hidden');
+                    icon.setAttribute('data-feather', 'chevron-up');
+                } else {
+                    content.classList.add('hidden');
+                    icon.setAttribute('data-feather', 'chevron-down');
+                }
+                feather.replace();
+            });
+        });
+
         // Month selector functionality
-        document.querySelectorAll('.month-btn').forEach(btn => {
+document.querySelectorAll('.month-btn').forEach(btn => {
             btn.addEventListener('click', () => {
                 document.querySelectorAll('.month-btn').forEach(b => b.classList.remove('active', 'bg-gray-100'));
                 btn.classList.add('active', 'bg-gray-100');

style.css

@@ -32,6 +32,19 @@ body {
 #upcoming-dates-list::-webkit-scrollbar-thumb:hover {
     background: #a0aec0;
 }
+/* Dropdown section styles */
+.toggle-section-btn, .toggle-subsection-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    transition: transform 0.2s;
+}
+
+.toggle-section-btn:hover, .toggle-subsection-btn:hover {
+    transform: scale(1.1);
+}
+
 /* Animation for course cards */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }