MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
 $(function(){
  $('.card').on('mouseenter', function(event){
    event.preventDefault();
    $(this).toggleClass('hovered');
  });
   $('.card').on('mouseleave', function(event){
    event.preventDefault();
    $(this).toggleClass('hovered');
  });
});
document.querySelectorAll('.sub-card').forEach(card => {
    card.addEventListener('click', function(event) {
        event.stopPropagation(); // Prevent event bubbling

        // Toggle the expanded state of the clicked card
        const isExpanded = card.getAttribute('data-expanded') === 'true';
        
        // Flip the current sub-card
        card.setAttribute('data-expanded', isExpanded ? 'false' : 'true');

        // Hide all other sub-cards
        document.querySelectorAll('.sub-card').forEach(otherCard => {
            if (otherCard !== card) {
                otherCard.setAttribute('data-expanded', 'false');
            }
        });
    });
});

document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseleave', function() {
        // Collapse all sub-cards when mouse leaves the main card
        document.querySelectorAll('.sub-card').forEach(subCard => {
            subCard.setAttribute('data-expanded', 'false');
        });
    });
});

document.addEventListener("DOMContentLoaded", function() {
    // Get all inner cards
    const innerCards = document.querySelectorAll(".inner-card");

    innerCards.forEach(innerCard => {
        innerCard.addEventListener("click", function() {
            // Toggle the active class on the inner card to show or hide content
            this.classList.toggle("active");
        });
    });
});