Make the juniors and senior buttons useable where they act as a filter

teams.html

@@ -33,7 +33,12 @@
             color: #62c1cd;
             border-bottom: 3px solid #62c1cd;
         }
-        .team-section {
+        .active-filter {
+            background-color: #62c1cd !important;
+            color: #020202 !important;
+            box-shadow: 0 0 15px rgba(98, 193, 205, 0.5);
+        }
+.team-section {
             display: none;
         }
         .team-section.active {
@@ -112,24 +117,35 @@
             <!-- Volleyball Teams -->
             <div id="volleyball" class="team-section active">
                 <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-8">VOLLEYBALL TEAMS</h2>
-                
                 <!-- Team Navigation -->
+                <div class="flex flex-wrap justify-center gap-4 mb-8">
+                    <button class="team-filter bg-[#62c1cd] text-[#020202] px-6 py-2 rounded-lg montserrat font-bold active-filter" data-filter="juniors">
+                        Juniors Teams
+                    </button>
+                    <button class="team-filter bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] px-6 py-2 rounded-lg montserrat font-bold" data-filter="seniors">
+                        Seniors Teams
+                    </button>
+                    <button class="team-filter bg-[#1a1a1a] hover:bg-[#2a2a2a] text-[#fcfdfd] px-6 py-2 rounded-lg montserrat font-bold" data-filter="all">
+                        All Teams
+                    </button>
+                </div>
+                
+                <!-- Team Tabs -->
                 <div class="flex flex-wrap justify-center gap-2 mb-8">
-                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm active" data-team="volleyball-juniors-a">
+                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm active" data-team="volleyball-juniors-a" data-category="juniors">
                         Juniors A
                     </button>
-                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-juniors-b">
+                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-juniors-b" data-category="juniors">
                         Juniors B
                     </button>
-                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-a">
+                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-a" data-category="seniors">
                         Seniors A
                     </button>
-                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-b">
+                    <button class="team-tab bg-[#1a1a1a] px-4 py-2 rounded montserrat text-sm" data-team="volleyball-seniors-b" data-category="seniors">
                         Seniors B
                     </button>
                 </div>
-                
-                <!-- Juniors A Team -->
+<!-- Juniors A Team -->
                 <div id="volleyball-juniors-a" class="team-content active">
                     <h3 class="bebas text-2xl text-[#62c1cd] mb-6">Juniors A Team</h3>
                     
@@ -776,31 +792,65 @@
                     document.getElementById(sport).classList.add('active');
                 });
             });
-            
-            // Team tab switching
-            const teamTabs = document.querySelectorAll('.team-tab');
-            teamTabs.forEach(tab => {
-                tab.addEventListener('click', function() {
-                    // Remove active class from all tabs in this group
-                    this.parentElement.querySelectorAll('.team-tab').forEach(t => {
-                        t.classList.remove('active');
-                    });
-                    
-                    // Add active class to clicked tab
-                    this.classList.add('active');
-                    
-                    // Hide all team content in this sport section
-                    const sportSection = this.closest('.team-section');
-                    sportSection.querySelectorAll('.team-content').forEach(content => {
-                        content.classList.remove('active');
-                    });
-                    
-                    // Show selected team content
-                    const team = this.getAttribute('data-team');
-                    document.getElementById(team).classList.add('active');
+        // Team filter functionality
+        const teamFilters = document.querySelectorAll('.team-filter');
+        const teamTabs = document.querySelectorAll('.team-tab');
+        
+        teamFilters.forEach(filter => {
+            filter.addEventListener('click', function() {
+                // Remove active class from all filters
+                teamFilters.forEach(f => f.classList.remove('active-filter'));
+                // Add active class to clicked filter
+                this.classList.add('active-filter');
+                
+                const filterType = this.getAttribute('data-filter');
+                
+                // Show/hide team tabs based on filter
+                teamTabs.forEach(tab => {
+                    const category = tab.getAttribute('data-category');
+                    if (filterType === 'all' || category === filterType) {
+                        tab.style.display = 'inline-block';
+                    } else {
+                        tab.style.display = 'none';
+                    }
+                });
+                
+                // If current active tab is hidden, switch to first visible tab
+                const activeTab = document.querySelector('.team-tab.active');
+                if (activeTab && activeTab.style.display === 'none') {
+                    const firstVisibleTab = document.querySelector('.team-tab[style="display: inline-block;"]') || 
+                                           document.querySelector('.team-tab:not([style*="none"])');
+                    if (firstVisibleTab) {
+                        firstVisibleTab.click();
+                    }
+                }
+            });
+        });
+        
+        // Team tab switching
+        const teamTabs = document.querySelectorAll('.team-tab');
+        teamTabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                // Remove active class from all tabs in this group
+                this.parentElement.querySelectorAll('.team-tab').forEach(t => {
+                    t.classList.remove('active');
                 });
+                
+                // Add active class to clicked tab
+                this.classList.add('active');
+                
+                // Hide all team content in this sport section
+                const sportSection = this.closest('.team-section');
+                sportSection.querySelectorAll('.team-content').forEach(content => {
+                    content.classList.remove('active');
+                });
+                
+                // Show selected team content
+                const team = this.getAttribute('data-team');
+                document.getElementById(team).classList.add('active');
             });
         });
+});
         
         // Player modal functions
         function openPlayerModal(playerId) {