Update khdh.html

Author: lilws

web/khdh.html

@@ -75,17 +75,13 @@ <h1 class="text-3xl md:text-4xl font-bold text-slate-900">Kế Hoạch Dạy H
             <p class="text-slate-500 mt-1">Giáo viên: Phong Do</p>
         </header>
 
-        <!-- Grade Navigation Tabs and Global Controls -->
-        <div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
-            <div class="flex-1 hidden sm:block"></div>
+        <!-- Grade Navigation Tabs -->
+        <div class="flex justify-center mb-8">
              <div id="grade-nav" class="flex space-x-2 bg-slate-200 p-1.5 rounded-full">
                 <button data-grade="3" class="nav-button py-2 px-6 rounded-full font-semibold transition-all duration-300">Khối 3</button>
                 <button data-grade="4" class="nav-button py-2 px-6 rounded-full font-semibold transition-all duration-300">Khối 4</button>
                 <button data-grade="5" class="nav-button py-2 px-6 rounded-full font-semibold transition-all duration-300">Khối 5</button>
             </div>
-            <div class="flex-1 flex justify-center sm:justify-end w-full sm:w-auto">
-                <button id="expand-all-btn" class="bg-sky-100 text-sky-700 text-sm font-semibold px-4 py-2 rounded-full hover:bg-sky-200 transition w-full sm:w-auto">Xem tất cả</button>
-            </div>
         </div>
 
         <main id="main-content">
@@ -103,6 +99,7 @@ <h2 class="text-2xl font-bold mb-4 text-slate-800">Phân bổ thời lượng (K
                 <section class="lg:col-span-2">
                     <div class="flex justify-between items-center mb-4">
                         <h2 class="text-2xl font-bold text-slate-800">Kế hoạch chi tiết khối 3</h2>
+                        <button class="expand-all-btn bg-sky-100 text-sky-700 text-sm font-semibold px-4 py-1.5 rounded-full hover:bg-sky-200 transition">Xem tất cả</button>
                     </div>
                     <div id="lesson-plan-container-3" class="space-y-3"></div>
                 </section>
@@ -122,6 +119,7 @@ <h2 class="text-2xl font-bold mb-4 text-slate-800">Phân bổ thời lượng (K
                 <section class="lg:col-span-2">
                      <div class="flex justify-between items-center mb-4">
                         <h2 class="text-2xl font-bold text-slate-800">Kế hoạch chi tiết khối 4</h2>
+                        <button class="expand-all-btn bg-sky-100 text-sky-700 text-sm font-semibold px-4 py-1.5 rounded-full hover:bg-sky-200 transition">Xem tất cả</button>
                     </div>
                     <div id="lesson-plan-container-4" class="space-y-3"></div>
                 </section>
@@ -141,6 +139,7 @@ <h2 class="text-2xl font-bold mb-4 text-slate-800">Phân bổ thời lượng (K
                 <section class="lg:col-span-2">
                      <div class="flex justify-between items-center mb-4">
                         <h2 class="text-2xl font-bold text-slate-800">Kế hoạch chi tiết khối 5</h2>
+                        <button class="expand-all-btn bg-sky-100 text-sky-700 text-sm font-semibold px-4 py-1.5 rounded-full hover:bg-sky-200 transition">Xem tất cả</button>
                     </div>
                     <div id="lesson-plan-container-5" class="space-y-3"></div>
                 </section>
@@ -450,22 +449,25 @@ <h4 class="font-bold text-slate-800 mt-1">${lesson.name}</h4>
         }
 
         /**
-         * Initializes the global "Expand/Collapse All" button.
+         * Initializes the "Expand/Collapse All" buttons.
          */
-        function initializeExpandAllButton() {
-            const button = document.getElementById('expand-all-btn');
-            button.addEventListener('click', () => {
-                const isExpanded = button.dataset.expanded === 'true';
-                const newExpandedState = !isExpanded;
-                
-                // UPDATED: Select all details across all tabs
-                const allDetails = document.querySelectorAll(`#main-content .details`);
-                allDetails.forEach(detail => {
-                    detail.classList.toggle('open', newExpandedState);
-                });
+        function initializeExpandAllButtons() {
+            const buttons = document.querySelectorAll('.expand-all-btn');
+            let isAllExpanded = false;
 
-                button.textContent = newExpandedState ? 'Thu gọn' : 'Xem tất cả';
-                button.dataset.expanded = newExpandedState;
+            buttons.forEach(button => {
+                button.addEventListener('click', () => {
+                    isAllExpanded = !isAllExpanded;
+                    
+                    const allDetails = document.querySelectorAll(`#main-content .details`);
+                    allDetails.forEach(detail => {
+                        detail.classList.toggle('open', isAllExpanded);
+                    });
+
+                    buttons.forEach(btn => {
+                        btn.textContent = isAllExpanded ? 'Thu gọn' : 'Xem tất cả';
+                    });
+                });
             });
         }
 
@@ -478,7 +480,7 @@ <h4 class="font-bold text-slate-800 mt-1">${lesson.name}</h4>
                 renderChart(grade);
             });
             setActiveGrade('3'); // Set grade 3 as the default
-            initializeExpandAllButton(); // Use the new global function
+            initializeExpandAllButtons();
         }
 
         // Event listener for grade navigation