MediaWiki:Mobile.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 users using the mobile site */

/**
ClickToggle instructions:
1. Toggle objects are declared as: <div class="clicktoggle" data-type="set" data-for="1,2"> This will toggle Content 2 of Group 1 </div>
     -> data-type="set" makes all other elements of a group invisible and the clicked one visible.
     -> data-type="toggle" toggles the visibility of all elements in a group. Visible becomes invisible and vice versa.
2. Target objects (that can be made visible or invisible) are declared as: <div class="clicktoggle-target" data-group="1" data-target="2"> This is Content 2 of Group 1 </div>
     (Any tag can be used in place of <div>, including table rows and columns. There can be several targets with the same content number.)
**/
function clickToggleInit() { // (c) Buoysel
    $(document).find('.clicktoggle').each( function () {
        var id = $(this).data('for').split(',');
        var type = $(this).data('type');
        var group = id[0];
        var target = id[1];
       	if ($(this).attr('style') === undefined) $(this).attr('style', '');
        if ($(this).data('active-style') !== undefined) {
        	$(this).data('inactive-style', $(this).attr('style'));
        	if ($(this).hasClass("clicktoggle-active")) {
        		$(this).attr('style', $(this).data('active-style'));
        	}
        }
        
        $(this).click(function() {
            $(this).addClass("clicktoggle-active");
            $(document).find('.clicktoggle').each( function () {
                var id2 = $(this).data('for').split(',');
                if (group == id2[0]) {
                	$(this).removeClass("clicktoggle-active");
		            if ($(this).data('inactive-style') !== undefined) {
		            	$(this).attr('style', $(this).data('inactive-style'));
		            }
                }
                if (group == id2[0] && target == id2[1]) {
                	$(this).addClass("clicktoggle-active");
                	if ($(this).data('active-style') !== undefined) {
                		$(this).attr('style', $(this).data('active-style'));
                	}
                }
            });
            
            $(document).find('.clicktoggle-target').each( function () {
                var group2 = $(this).data('group');
                var target2Arr = $(this).data('target').split(',');
                if (group == group2) {
                    if (type == 'toggle') {
                        if (jQuery.inArray( target, target2Arr ) !== -1) {
                            if ($(this).css('display') == 'none')
                                $(this).css('display', '');
                            else
                                $(this).css('display', 'none');
                        } else {
                            if ($(this).css('display') == '')
                                $(this).css('display', 'none');
                            else
                                $(this).css('display', '');
                        }
                    } else if (type == 'set') {
                        if (jQuery.inArray( target, target2Arr ) !== -1) {
                            $(this).css('display', '');
                        } else {
                            $(this).css('display', 'none');
                        }
                    }
                }
            });
        });
    });
}

$(function() {
	clickToggleInit();
});

/* </pre> */