MediaWiki:Common.js: Difference between revisions
Appearance
	
	
| DrunkMunki (talk | contribs)  Created page with "$(document).ready(function() {     $('.tab').click(function() {         $('.tab').removeClass('active');         $(this).addClass('active');         // Add logic to show/hide content if needed     }); });" | DrunkMunki (talk | contribs) No edit summary | ||
| Line 1: | Line 1: | ||
| $(document).ready(function() { | $(document).ready(function() { | ||
|     // Tab switching | |||
|      $('.tab').click(function() { |      $('.tab').click(function() { | ||
|         // Remove active class from all tabs | |||
|          $('.tab').removeClass('active'); |          $('.tab').removeClass('active'); | ||
|         // Add active class to clicked tab | |||
|          $(this).addClass('active'); |          $(this).addClass('active'); | ||
|          //  | |||
|          // Content switching (if tabs control content) | |||
|         var tabId = $(this).data('tab'); // Assumes data-tab attribute (e.g., data-tab="tab1") | |||
|         if (tabId) { | |||
|             $('.tab-content').hide(); // Hide all tab content | |||
|             $('#' + tabId).show(); // Show content for active tab | |||
|         } | |||
|     }); | |||
|     // Collapsible sections (only if native mw-collapsible is unavailable or customized) | |||
|     $('.mw-collapsible').each(function() { | |||
|         var $this = $(this); | |||
|         // Hide content initially | |||
|         $this.find('.mw-collapsible-content').hide(); | |||
|         // Create toggle link if not present | |||
|         if (!$this.find('.mw-collapsible-toggle').length) { | |||
|             $this.prepend('<span class="mw-collapsible-toggle" style="cursor:pointer; color:blue; text-decoration:underline;">Expand</span>'); | |||
|         } | |||
|         // Toggle on click | |||
|         $this.find('.mw-collapsible-toggle').click(function() { | |||
|             $this.toggleClass('mw-collapsed'); | |||
|             var $content = $this.find('.mw-collapsible-content'); | |||
|             $content.slideToggle(); | |||
|             // Update toggle text | |||
|             $(this).text($content.is(':visible') ? 'Hide' : 'Expand'); | |||
|         }); | |||
|      }); |      }); | ||
| }); | }); | ||
Latest revision as of 15:38, 11 May 2025
$(document).ready(function() {
    // Tab switching
    $('.tab').click(function() {
        // Remove active class from all tabs
        $('.tab').removeClass('active');
        // Add active class to clicked tab
        $(this).addClass('active');
        // Content switching (if tabs control content)
        var tabId = $(this).data('tab'); // Assumes data-tab attribute (e.g., data-tab="tab1")
        if (tabId) {
            $('.tab-content').hide(); // Hide all tab content
            $('#' + tabId).show(); // Show content for active tab
        }
    });
    // Collapsible sections (only if native mw-collapsible is unavailable or customized)
    $('.mw-collapsible').each(function() {
        var $this = $(this);
        // Hide content initially
        $this.find('.mw-collapsible-content').hide();
        // Create toggle link if not present
        if (!$this.find('.mw-collapsible-toggle').length) {
            $this.prepend('<span class="mw-collapsible-toggle" style="cursor:pointer; color:blue; text-decoration:underline;">Expand</span>');
        }
        // Toggle on click
        $this.find('.mw-collapsible-toggle').click(function() {
            $this.toggleClass('mw-collapsed');
            var $content = $this.find('.mw-collapsible-content');
            $content.slideToggle();
            // Update toggle text
            $(this).text($content.is(':visible') ? 'Hide' : 'Expand');
        });
    });
});
