Module:Collapsible list

From Chalo Chatu, Zambia online encyclopedia
Jump to navigationJump to search

This module provides a simple, dependency-light way to render a collapsible list in templates and articles. It is designed for use inside infoboxes, sidebars, or documentation where a compact, toggleable list is needed.

Overview

Invoke with:

    The module outputs a minimal HTML structure with classes that can be styled via MediaWiki:Common.css. If collapsed=yes is provided, the list is initially hidden (pure-CSS collapse if you style it that way; optional JS can add click-to-toggle).

    Parameters

    All parameters are optional unless otherwise noted.

    title / header
    Text to show as the list heading. Use either title= or header=.
    collapsed
    yes / no. If yes, the list container gets a collapsed class.
    1..50
    Up to fifty list items. Use positional parameters: 1=, 2=, 3=, etc.
    class
    Additional CSS classes to append to the outer container.
    id
    Optional id attribute on the outer container.
    list_style
    Inline CSS for the ul element. Example: list_style=margin-left:0;
    item_style
    Inline CSS applied to each li element.

    Note: The current minimal implementation guarantees stable output classes:

    • chalo-collapsible
    • chalo-collapsible-head
    • chalo-collapsible-body
    • collapsed (toggled by collapsed=yes)

    Basic usage

      Advanced usage

      Add custom classes and styles:

        Accessibility notes

        • Prefer short, descriptive headings in title=.
        • Keep list items concise.
        • Do not hide critical information behind collapsed content when it affects article comprehension.

        Styling

        Add or adjust rules in MediaWiki:Common.css. Example skeleton: .chalo-collapsible { border:1px solid #ddd; margin:.2em 0; } .chalo-collapsible-head { background:#f7f7f7; padding:.3em; cursor:pointer; } .chalo-collapsible-body { padding:.4em .6em; } .chalo-collapsible.collapsed .chalo-collapsible-body { display:none; }

        Optional JS click-to-toggle can be bound by targeting .chalo-collapsible-head.

        See also

        Errors and troubleshooting

        • Script error: The function "collapsible" does not exist
        Use
          or call
            if legacy templates require the old name. Ensure Module:Collapsible exists if using the latter.

            Maintenance

            This module is intentionally minimal. Extend carefully to avoid adding heavy dependencies. Document any new parameters here.


            local p = {}
            
            local function yesno(val)
            	if type(val) == 'string' then
            		val = mw.text.trim(val)
            		local lower = mw.ustring.lower(val)
            		if lower == 'yes' or lower == 'y' or lower == 'true' or lower == '1' then return true end
            		if lower == 'no' or lower == 'n' or lower == 'false' or lower == '0' then return false end
            	end
            	return val and true or false
            end
            
            function p.main(frame)
            	local args = frame:getParent() and frame:getParent().args or frame.args
            	local title = args.title or args.header or ''
            	local list = {}
            	for i = 1, 50 do
            		local v = args[i]
            		if v and v ~= '' then table.insert(list, v) end
            	end
            
            	local out = {}
            	table.insert(out, '<div class="chalo-collapsible' .. (yesno(args.collapsed) and ' collapsed' or '') .. '">')
            	if title ~= '' then
            		table.insert(out, '<div class="chalo-collapsible-head">' .. title .. '</div>')
            	end
            	table.insert(out, '<div class="chalo-collapsible-body"><ul>')
            	for _, v in ipairs(list) do
            		table.insert(out, '<li>' .. v .. '</li>')
            	end
            	table.insert(out, '</ul></div></div>')
            	return table.concat(out)
            end
            
            return p