User:Tiddlywinks/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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
ClickToggleR instructions:
1. Toggle objects are declared as: <div class="clicktoggleR" 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 clickToggleRInit() { // (c) Buoysel
    $(document).find('.clicktoggler').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() {
            if (type == 'toggle') {
                if ($(this).hasClass('clicktoggle-active')) {
                    $(this).removeClass("clicktoggle-active");
                    if ($(this).data('inactive-style') !== undefined) {
                        $(this).attr('style', $(this).data('inactive-style'));
                    }
                } else {
                    $(this).addClass("clicktoggle-active");
                    if ($(this).data('active-style') !== undefined) {
                        $(this).attr('style', $(this).data('active-style'));
                    }
                }
            } else if (type == 'set') {
                $(this).addClass("clicktoggle-active");
                $(document).find('.clicktoggler').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 (type == 'set') {
                        if (jQuery.inArray( target, target2Arr ) !== -1) {
                            $(this).css('display', '');
                        } else {
                            $(this).css('display', 'none');
                        }
                    }
                }
            });
        });
    });
}

$(function() {
    clickToggleRInit();
});