CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Manual:Collapsible elements/Demo/Advanced - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref--excluded vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"747b4b37-3c60-4131-ab95-8e116a41b8d0","wgCanonicalNamespace":"Manual","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":100,"wgPageName":"Manual:Collapsible_elements/Demo/Advanced","wgTitle":"Collapsible elements/Demo/Advanced","wgCurRevisionId":6698225,"wgRevisionId":6698225,"wgArticleId":776077,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Manual:Collapsible_elements/Demo/Advanced","wgRelevantArticleId":776077,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true, "wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":9000,"wgInternalRedirectTargetUrl":"/wiki/Manual:Collapsible_elements/Demo/Advanced","wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.tablesorter.styles":"ready", "jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cjquery.tablesorter.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Manual:Collapsible elements/Demo/Advanced - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-100 ns-subject mw-editable page-Manual_Collapsible_elements_Demo_Advanced rootpage-Manual_Collapsible_elements skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=Manual%3ACollapsible+elements%2FDemo%2FAdvanced" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACollapsible+elements%2FDemo%2FAdvanced" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACollapsible+elements%2FDemo%2FAdvanced" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Manual%3ACollapsible+elements%2FDemo%2FAdvanced" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Manual%3ACollapsible+elements%2FDemo%2FAdvanced" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Divs" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Divs"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Divs</span> </div> </a> <ul id="toc-Divs-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tables" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Tables"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Tables</span> </div> </a> <ul id="toc-Tables-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Lists" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Lists"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Lists</span> </div> </a> <ul id="toc-Lists-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Custom_toggles" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Custom_toggles"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Custom toggles</span> </div> </a> <ul id="toc-Custom_toggles-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Combination" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Combination"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Combination</span> </div> </a> <ul id="toc-Combination-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Custom_toggle_link_placement" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Custom_toggle_link_placement"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Custom toggle link placement</span> </div> </a> <ul id="toc-Custom_toggle_link_placement-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-A_fancy_heading" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#A_fancy_heading"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span><span>A fancy heading</span></span> </div> </a> <button aria-controls="toc-A_fancy_heading-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle <span>A fancy heading</span> subsection</span> </button> <ul id="toc-A_fancy_heading-sublist" class="vector-toc-list"> <li id="toc-A_fancier_heading" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#A_fancier_heading"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span> <span><span>A fancier heading</span></span> </div> </a> <ul id="toc-A_fancier_heading-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Manual</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Collapsible elements/Demo/Advanced</span></h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-manual" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Collapsible_elements/Demo/Advanced" title="View the subject page [c]" accesskey="c"><span>Manual</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Manual_talk:Collapsible_elements/Demo/Advanced" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Manual:Collapsible_elements/Demo/Advanced"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Manual:Collapsible_elements/Demo/Advanced"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Manual:Collapsible_elements/Demo/Advanced" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Manual:Collapsible_elements/Demo/Advanced" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&oldid=6698225" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Manual%3ACollapsible_elements%2FDemo%2FAdvanced&id=6698225&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FManual%3ACollapsible_elements%2FDemo%2FAdvanced"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FManual%3ACollapsible_elements%2FDemo%2FAdvanced"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Manual%3ACollapsible+elements%2FDemo%2FAdvanced"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Manual%3ACollapsible_elements%2FDemo%2FAdvanced&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Manual:Collapsible_elements" title="Manual:Collapsible elements">Manual:Collapsible elements</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r6353907">.mw-parser-output .hatnote{font-style:italic;padding-bottom:0.4em;margin-bottom:0.4em;border-bottom:1px solid #ccc}.mw-parser-output .hatnote.no-border{border-bottom:none}</style><div role="note" class="hatnote">This page was imported from <a class="external free" href="https://test.wikipedia.org/w/index.php?title=Test_suite_for_mw-collapsible&action=history">https://test.wikipedia.org/w/index.php?title=Test_suite_for_mw-collapsible&action=history</a>.</div> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Divs">Divs</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=1" title="Edit section: Divs"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><big><b>Collapsible div </b></big> </p> <hr /> <div class="mw-collapsible" data-collapsetext="You may collapse me by clicking here" data-expandtext="Let me back out !"> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum" class="extiw" title="w:Lorem ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="clear: both;"></div> </div> <div style="clear:both"></div> <p><big><b> Collapsible div (collapsed by default) </b></big> </p> <hr /> <div class="mw-collapsible mw-collapsed"> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum" class="extiw" title="w:Lorem ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="clear: both;"></div> </div> <div style="clear:both"></div> <p><big id="head-colapsible_div_nested_in_collapsed_div"><b> Collapsible div nested in collapsed div </b></big> </p> <hr /> <div class="mw-collapsible mw-collapsed" style="background-color:#f9f9f9"> <p>Hi there this is text in the outer div. </p> <div class="mw-collapsible" style="background:#f9f9f9"> <p>This content is inside the nested collapsible div. </p> </div> </div> <div style="clear:both"></div> <div class="mw-heading mw-heading2"><h2 id="Tables">Tables</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=2" title="Edit section: Tables"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><big id="head-collapsible_table"><b> Collapsible table </b></big> </p> <hr /> <table class="wikitable sortable mw-collapsible"> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <div style="clear:both"></div> <p><big id="head-collapsible-table-w-caption"><b> Collapsible table with caption </b></big> </p> <hr /> <table class="wikitable sortable mw-collapsible"> <caption>I am a caption! </caption> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <table class="wikitable mw-collapsible"> <caption>Same, but without sortability (no explicit <thead>) </caption> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <div style="clear:both"></div> <p><big><b> Collapsible table (collapsed by default) </b></big> </p> <hr /> <table class="wikitable mw-collapsible mw-collapsed"> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <div style="clear:both"></div> <p><big><b> Collapsible table in collapsed div </b></big> </p> <hr /> <div class="mw-collapsible mw-collapsed"> <p>Some text in the div here. </p> <table class="wikitable sortable mw-collapsible"> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <p>Some more text in the div. </p> </div> <div style="clear:both;"></div> <p><big><b> Collapsible table-cell content in a table</b></big> </p> <hr /> <table class="wikitable"> <tbody><tr> <th>X</th> <th>Y</th> <th>Z</th> </tr> <tr> <td>Hi, the content in the cell below me is collapsible and collapsed by default</td> <td>35</td> <td>91</td> </tr> <tr> <td class="mw-collapsible mw-collapsed">I'm the mw-collapsible cell content!</td> <td>42</td> <td>63</td> </tr> </tbody></table> <div style="clear:both"></div> <div class="mw-heading mw-heading2"><h2 id="Lists">Lists</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=3" title="Edit section: Lists"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><big id="head-collapsible-ul"><b> Collapsible unordered list </b></big> </p> <hr /> <ul class="mw-collapsible"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> <div style="clear:both"></div> <p><big id="head-collapsible-ol"><b> Collapsible ordered list </b></big> </p> <hr /> <ol class="mw-collapsible"> <li>One</li> <li>Two is more than one</li> <li>..a total of three items!</li> </ol> <div style="clear:both"></div> <div class="mw-heading mw-heading2"><h2 id="Custom_toggles">Custom toggles</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=4" title="Edit section: Custom toggles"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><big><b> Pre-made toggle</b></big> </p> <hr /> <style data-mw-deduplicate="TemplateStyles:r3816181">.mw-parser-output #collapse-pre-one .mw-collapsible-toggle .up,.mw-parser-output #collapse-pre-one.mw-collapsed .mw-collapsible-toggle .down{display:none}.mw-parser-output #collapse-pre-one .mw-collapsible-toggle .down,.mw-parser-output #collapse-pre-one.mw-collapsed .mw-collapsible-toggle .up{display:block}</style> <div id="collapse-pre-one" class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;"><span class="down"><figure class="mw-halign-center" typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Arrow-down-dash-2.0.svg/50px-Arrow-down-dash-2.0.svg.png" decoding="async" width="50" height="50" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Arrow-down-dash-2.0.svg/75px-Arrow-down-dash-2.0.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Arrow-down-dash-2.0.svg/100px-Arrow-down-dash-2.0.svg.png 2x" data-file-width="160" data-file-height="160" /></span><figcaption></figcaption></figure></span><span class="up"><figure class="mw-halign-center" typeof="mw:File"><span><img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Arrow-up-dash-2.0.svg/50px-Arrow-up-dash-2.0.svg.png" decoding="async" width="50" height="50" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Arrow-up-dash-2.0.svg/75px-Arrow-up-dash-2.0.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Arrow-up-dash-2.0.svg/100px-Arrow-up-dash-2.0.svg.png 2x" data-file-width="160" data-file-height="160" /></span><figcaption></figcaption></figure></span></div> <div class="mw-collapsible-content"> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum" class="extiw" title="w:Lorem ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="clear: both;"></div> </div></div> <div style="clear:both"></div> <p><big id="h-pre-made-toggle-with-link"><b> Pre-made toggle with link in it</b></big> </p> <hr /> <div class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;">This is a toggle with link to <a href="#top">the top of the page</a></div> <div class="mw-collapsible-content"> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum" class="extiw" title="w:Lorem ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="clear: both;"></div> </div></div> <div style="clear:both"></div> <p><big><b> Remote collapsible 1 (div, multiple togglers) <sup class="mw-customtoggle-myDivision" style="color:orange">@</sup></b></big> </p> <hr /> <dl><dd><strong class="mw-customtoggle-myDivision">@</strong></dd></dl> <div class="usermessage mw-customtoggle-myDivision">Click here or on one of the @'s to expand the hidden element.</div> <div class="mw-customtoggle-myDivision" style="cursor:pointer"><figure class="mw-halign-left" typeof="mw:File"><span title="title=Click me!"><img alt="title=Click me!" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/At_char.svg/100px-At_char.svg.png" decoding="async" width="100" height="100" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/At_char.svg/150px-At_char.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b6/At_char.svg/200px-At_char.svg.png 2x" data-file-width="10" data-file-height="10" /></span><figcaption>title=Click me!</figcaption></figure> ⇐ @@Clicking here or on At-image will toggle also@@<div style="clear:both"></div></div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision"> <div class="toccolours mw-collapsible-content"><a href="https://en.wikipedia.org/wiki/Lorem_ipsum" class="extiw" title="w:Lorem ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="clear: both;"></div></div> </div> <div style="clear:both"></div> <p><big><b> Custom collapsible 2 (table)</b></big> </p> <hr /> <div class="usermessage mw-customtoggle-myTable">Click here to toggle the table.</div> <table class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"> <tbody><tr> <th>Hello </th> <th>World </th></tr> <tr> <td>Content </td> <td>Goes </td></tr> <tr> <td>In </td> <td>Here </td></tr></tbody></table> <div style="clear:both"></div> <p><big><b> Custom collapsible 3 (list)</b></big> </p> <hr /> <div class="usermessage mw-customtoggle-myList">Click here to toggle the list.</div> <ul class="mw-collapsible" id="mw-customcollapsible-myList"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <div style="clear:both"></div> <p><big><b> Custom collapsible 4 (table-row)</b></big> </p> <hr /> <table class="wikitable"> <tbody><tr> <th>X</th> <th>Y</th> <th>Z</th> </tr> <tr> <td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">I'm the mw-customtoggle for A, B and C. Click me to toggle three table-rows at once!</span></td> <td>20</td> <td>11</td> </tr> <tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed"> <td>I'm the mw-customcollapsible row A</td> <td>20</td> <td>7</td> </tr> <tr id="mw-customcollapsible-BB" class="mw-collapsible mw-collapsed"> <td>I'm the mw-customcollapsible row B</td> <td>21</td> <td>11</td> </tr> <tr id="mw-customcollapsible-CC" class="mw-collapsible mw-collapsed"> <td>I'm the mw-customcollapsible row C</td> <td>29</td> <td>1</td> </tr> <tr> <td>This is just a plain table cell</td><td>0</td><td>30</td> </tr> </tbody></table> <p><big><b> Custom collapsible 5 (double purpose toggle)</b></big> </p> <hr /> <p><br /> </p> <div class="toccolours"> <div class="mw-collapsible toccolours" id="mw-customcollapsible-DPT"> <p>I am custom collapsible "DPT". </p> </div> <div class="mw-collapsible toccolours"><span class="mw-collapsible-toggle mw-customtoggle-DPT" style="cursor: pointer; border: 1px solid #aaa; border-radius: 5px; padding: 2px;">I am a toggle for my parent ("collapsible div") and custom toggle for "DPT".</span> <div class="mw-collapsible-content"> <p>I am a collapsible div. </p> </div> </div> </div> <p><br /> </p> <div style="clear:both"></div> <div class="mw-heading mw-heading2"><h2 id="Combination">Combination</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=5" title="Edit section: Combination"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><big><b> Combination example </b></big> </p> <hr /> <ul class="mw-collapsible mw-collapsed" data-collapsetext="I understand" data-expandtext="Click here for more information"> <li>Table is collapsed by default</li> <li>Second row contains collapsible list</li> <li>Third row contains a collapsible block with custom labels</li> </ul> <table class="wikitable plainlinks mw-collapsible mw-collapsed"> <tbody><tr> <th colspan="3"><strong class="mw-collapsible-toggle mw-collapsible-toggle-expanded" style="color:#FF00EE;float:none">Collapse</strong> <b>Manual:Collapsible elements/Demo/Advanced</b> </th></tr> <tr> <td width="14%">#1 </td> <td> <p>Hello, <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit">edit this page</a> Hello, <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=purge">purge this page</a> Hello, <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Manual_talk:Collapsible_elements/Demo/Advanced&action=edit&section=new">add new section to talkpage</a> </p> </td> <td width="14%"><span typeof="mw:File"><a href="/wiki/File:Example.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/25px-Example.svg.png" decoding="async" width="25" height="25" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/38px-Example.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/50px-Example.svg.png 2x" data-file-width="600" data-file-height="600" /></a></span> </td></tr> <tr> <td width="14%">#2 </td> <td> <ul class="mw-collapsible"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </td> <td width="14%"><span typeof="mw:File"><a href="/wiki/File:Example.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/25px-Example.svg.png" decoding="async" width="25" height="25" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/38px-Example.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/50px-Example.svg.png 2x" data-file-width="600" data-file-height="600" /></a></span> </td></tr> <tr> <td width="14%">#3 </td> <td> <p>There's a lot more secret content hidden ! </p> <div style="background:red" class="mw-collapsible mw-collapsed" data-collapsetext="Hide me" data-expandtext="Reveal me"> <p><b>This following code is top secret:</b><br /> </p> <dl><dd><i>kmnd ihwkxucnskdf</i></dd></dl> </div> </td> <td width="14%"><span typeof="mw:File"><a href="/wiki/File:Example.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/25px-Example.svg.png" decoding="async" width="25" height="25" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/38px-Example.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/50px-Example.svg.png 2x" data-file-width="600" data-file-height="600" /></a></span> </td></tr> <tr> <td colspan="3" style="text-align:center">Last edited by <a href="/wiki/User:Clump" title="User:Clump">Clump</a> on 20240814112344 </td></tr> <tr> <td colspan="3" style="text-align:center"><a class="external text" href="https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&oldid=-">Permalink to this revision</a> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="Custom_toggle_link_placement">Custom toggle link placement</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&action=edit&section=6" title="Edit section: Custom toggle link placement"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-collapsible"> <div class="mw-heading mw-heading2"><h2 id="A_fancy_heading"> <span style="color: purple">A fancy heading</span> <div class="mw-collapsible-toggle-placeholder"></div> </h2></div> <div class="mw-collapsible-content"> <p>Outer collapsible content.</p> <p lang="la">Lorem ipsum dolor sit amet.</p> <div class="mw-collapsible"> <div class="mw-heading mw-heading3"><h3 id="A_fancier_heading"> <span style="color: purple">A fancier heading</span> <div class="mw-collapsible-toggle-placeholder"></div> </h3></div> <div class="mw-collapsible-content"> <p>Inner collapsible content.</p> <p lang="la">Consectetur adipiscing elit.</p> </div> </div> </div> </div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&useformat=desktop" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&oldid=6698225">https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&oldid=6698225</a>"</div></div> <div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 14 August 2024, at 11:23.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Manual:Collapsible_elements/Demo/Advanced&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-759d5489db-rq9z9","wgBackendResponseTime":118,"wgPageParseReport":{"limitreport":{"cputime":"0.049","walltime":"0.076","ppvisitednodes":{"value":181,"limit":1000000},"postexpandincludesize":{"value":4254,"limit":2097152},"templateargumentsize":{"value":118,"limit":2097152},"expansiondepth":{"value":4,"limit":100},"expensivefunctioncount":{"value":0,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":686,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 27.165 1 -total"," 43.39% 11.787 1 Template:Rellink"," 32.88% 8.933 5 Template:Sample_content"," 7.84% 2.130 1 Template:Lorem_Ipsum"," 6.25% 1.697 1 Template:Clear"]},"cachereport":{"origin":"mw-web.eqiad.main-565d46677b-bn5j5","timestamp":"20241128122320","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>