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 - 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":"16505f7b-339f-491d-a0b8-f6ccc73a0a7c","wgCanonicalNamespace":"Manual","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":100,"wgPageName":"Manual:Collapsible_elements","wgTitle":"Collapsible elements","wgCurRevisionId":6620646,"wgRevisionId":6620646,"wgArticleId":19251,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Manual"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Manual:Collapsible_elements","wgRelevantArticleId":19251,"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":10000,"wgTranslatePageTranslation":"source","wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q13395701","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","ext.translate.tag.languages":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.tablesorter.styles":"ready", "jquery.makeCollapsible.styles":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.pygments.view","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking"];</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.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%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 - MediaWiki"> <meta property="og:type" content="website"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Manual:Collapsible_elements"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Manual:Collapsible_elements&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"> <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 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"> <li class="interlanguage-link interwiki-arc mw-list-item"><a href="https://arc.wikipedia.org/wiki/%DC%98%DC%9D%DC%A9%DC%9D%DC%A6%DC%95%DC%9D%DC%90:NavFrame" title="ܘܝܩܝܦܕܝܐ:NavFrame – Aramaic" lang="arc" hreflang="arc" data-title="ܘܝܩܝܦܕܝܐ:NavFrame" data-language-autonym="ܐܪܡܝܐ" data-language-local-name="Aramaic" class="interlanguage-link-target"><span>ܐܪܡܝܐ</span></a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/%D0%92%D1%96%D0%BA%D1%96%D0%BF%D0%B5%D0%B4%D1%8B%D1%8F:%D0%97%D0%B3%D0%BE%D1%80%D1%82%D0%B2%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%8F_%D0%B1%D0%BB%D0%BE%D0%BA%D1%96" title="Вікіпедыя:Згортвальныя блокі – Belarusian" lang="be" hreflang="be" data-title="Вікіпедыя:Згортвальныя блокі" data-language-autonym="Беларуская" data-language-local-name="Belarusian" class="interlanguage-link-target"><span>Беларуская</span></a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikipedia.org/wiki/Wikipedia:NavFrame" title="Wikipedia:NavFrame – English" lang="en" hreflang="en" data-title="Wikipedia:NavFrame" data-language-autonym="English" data-language-local-name="English" class="interlanguage-link-target"><span>English</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/Help:%E3%83%80%E3%82%A4%E3%83%8A%E3%83%9F%E3%83%83%E3%82%AF%E3%83%BB%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9" title="Help:ダイナミック・ナビゲーション・ボックス – Japanese" lang="ja" hreflang="ja" data-title="Help:ダイナミック・ナビゲーション・ボックス" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-ku mw-list-item"><a href="https://ku.wikipedia.org/wiki/W%C3%AEk%C3%AEpediya:NavFrame" title="Wîkîpediya:NavFrame – Kurdish" lang="ku" hreflang="ku" data-title="Wîkîpediya:NavFrame" data-language-autonym="Kurdî" data-language-local-name="Kurdish" class="interlanguage-link-target"><span>Kurdî</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Wikipedia:NavFrame" title="Wikipedia:NavFrame – Polish" lang="pl" hreflang="pl" data-title="Wikipedia:NavFrame" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Wikip%C3%A9dia:NavFrame" title="Wikipédia:NavFrame – Portuguese" lang="pt" hreflang="pt" data-title="Wikipédia:NavFrame" data-language-autonym="Português" data-language-local-name="Portuguese" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%A1%D0%B2%D0%BE%D1%80%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8" title="Википедия:Сворачиваемые блоки – Russian" lang="ru" hreflang="ru" data-title="Википедия:Сворачиваемые блоки" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-sd mw-list-item"><a href="https://sd.wikipedia.org/wiki/%D9%88%DA%AA%D9%8A%D9%BE%D9%8A%DA%8A%D9%8A%D8%A7:NavFrame" title="وڪيپيڊيا:NavFrame – Sindhi" lang="sd" hreflang="sd" data-title="وڪيپيڊيا:NavFrame" data-language-autonym="سنڌي" data-language-local-name="Sindhi" class="interlanguage-link-target"><span>سنڌي</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Wikipedia:NavFrame" title="Wikipedia:NavFrame – Simple English" lang="en-simple" hreflang="en-simple" data-title="Wikipedia:NavFrame" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/Wikipedia:%E6%97%A7%E7%89%88%E6%8A%98%E5%8F%A0%E6%98%BE%E7%A4%BA" title="Wikipedia:旧版折叠显示 – Chinese" lang="zh" hreflang="zh" data-title="Wikipedia:旧版折叠显示" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/Wikipedia:NavFrame" title="Wikipedia:NavFrame – Cantonese" lang="yue" hreflang="yue" data-title="Wikipedia:NavFrame" data-language-autonym="粵語" data-language-local-name="Cantonese" class="interlanguage-link-target"><span>粵語</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q13395701#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit 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" 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" 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" 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" 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-jQuery.makeCollapsible" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#jQuery.makeCollapsible"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>jQuery.makeCollapsible</span> </div> </a> <button aria-controls="toc-jQuery.makeCollapsible-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 jQuery.makeCollapsible subsection</span> </button> <ul id="toc-jQuery.makeCollapsible-sublist" class="vector-toc-list"> <li id="toc-Table" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Table"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Table</span> </div> </a> <ul id="toc-Table-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-With_specified_initial_state" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#With_specified_initial_state"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>With specified initial state</span> </div> </a> <ul id="toc-With_specified_initial_state-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Simple" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Simple"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>Simple</span> </div> </a> <ul id="toc-Simple-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Simple_with_title" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Simple_with_title"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4</span> <span>Simple with title</span> </div> </a> <ul id="toc-Simple_with_title-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-With_specified_collapsible_part" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#With_specified_collapsible_part"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.5</span> <span>With specified collapsible part</span> </div> </a> <ul id="toc-With_specified_collapsible_part-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Custom_toggle_link_placement" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Custom_toggle_link_placement"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.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-With_custom_toggle_link" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#With_custom_toggle_link"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.7</span> <span>With custom toggle link</span> </div> </a> <ul id="toc-With_custom_toggle_link-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Inside_another_element" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Inside_another_element"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.8</span> <span>Inside another element</span> </div> </a> <ul id="toc-Inside_another_element-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Move_toggle_link_to_the_left" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Move_toggle_link_to_the_left"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.9</span> <span>Move toggle link to the left</span> </div> </a> <ul id="toc-Move_toggle_link_to_the_left-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Removing_brackets_from_the_toggle" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Removing_brackets_from_the_toggle"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.10</span> <span>Removing brackets from the toggle</span> </div> </a> <ul id="toc-Removing_brackets_from_the_toggle-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </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</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" 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" 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"><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&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&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"><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&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&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" 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" 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&oldid=6620646" 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&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&id=6620646&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"><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"><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"><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&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&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" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-wikipedia mw-list-item"><a href="https://en.wikipedia.org/wiki/Wikipedia:NavFrame" hreflang="en"><span>Wikipedia</span></a></li><li class="wb-otherproject-link wb-otherproject-wikiversity mw-list-item"><a href="https://en.wikiversity.org/wiki/Wikiversity:NavFrame" hreflang="en"><span>Wikiversity</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q13395701" title="Link to connected data repository item [g]" accesskey="g"><span>Wikidata item</span></a></li> </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></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Manual%3ACollapsible+elements&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Manual:Collapsible_elements/de" class="mw-pt-progress mw-pt-progress--low" title="Manual:Collapsible elements/de (7% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Manual:Collapsible_elements/tr" class="mw-pt-progress mw-pt-progress--med" title="Manual:Daraltabilir ögeler (50% translated)" lang="tr" dir="ltr">Türkçe</a></li> <li><a href="/wiki/Manual:Collapsible_elements/da" class="mw-pt-progress mw-pt-progress--low" title="Manual:Collapsible elements/da (5% translated)" lang="da" dir="ltr">dansk</a></li> <li><a href="/wiki/Manual:Collapsible_elements/es" class="mw-pt-progress mw-pt-progress--low" title="Manual:Elementos plegables (10% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/Manual:Collapsible_elements/fr" class="mw-pt-progress mw-pt-progress--complete" title="Manuel:Eléments repliables (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Manual:Collapsible_elements/pl" class="mw-pt-progress mw-pt-progress--low" title="Manual:Collapsible elements/pl (1% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Manual:Collapsible_elements/cs" class="mw-pt-progress mw-pt-progress--complete" title="Příručka:Skládací prvky (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Manual:Collapsible_elements/ru" class="mw-pt-progress mw-pt-progress--low" title="Manual:Collapsible elements/ru (1% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/Manual:Collapsible_elements/zh" class="mw-pt-progress mw-pt-progress--high" title="Manual:可折叠元素 (83% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Manual:Collapsible_elements/ja" class="mw-pt-progress mw-pt-progress--med" title="Manual:Collapsible elements/ja (17% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <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">MediaWiki offers collapsible classes out of the box for MediaWiki 1.18 and higher. For earlier community versions, see <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements&oldid=4457019">this revision</a>.</div> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="jQuery.makeCollapsible">jQuery.makeCollapsible</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=1" title="Edit section: jQuery.makeCollapsible"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><i>See also <a href="/wiki/Special:MyLanguage/ResourceLoader/Core_modules#jquery.makeCollapsible" title="Special:MyLanguage/ResourceLoader/Core modules">jQuery.makeCollapsible</a><span style="display:none"><a href="/wiki/ResourceLoader/Core_modules#jquery.makeCollapsible" title="ResourceLoader/Core modules"> </a></span> documentation for more information about how it works.</i></dd> <dd><i>See also: <a href="/wiki/Special:MyLanguage/Manual:Collapsible_elements/Demo/Advanced" title="Special:MyLanguage/Manual:Collapsible elements/Demo/Advanced">Manual:Collapsible elements/Demo/Advanced</a><span style="display:none"><a href="/wiki/Manual:Collapsible_elements/Demo/Advanced" title="Manual:Collapsible elements/Demo/Advanced"> </a></span> for more examples.</i></dd></dl> <p>This module is in MediaWiki core by default as of MediaWiki 1.18 and higher. This module ships with MediaWiki by default. You don't need to copy it to a wiki. The source (if you're interested) is in the repository for mediawiki-core (<a href="https://gerrit.wikimedia.org/g/mediawiki/core/%2B/HEAD/resources/src/jquery/jquery.makeCollapsible.js" class="extiw" title="git:mediawiki/core/+/HEAD/resources/src/jquery/jquery.makeCollapsible.js">resources/src/jquery/jquery.makeCollapsible.js</a> and <a href="https://gerrit.wikimedia.org/g/mediawiki/core/%2B/HEAD/resources/src/jquery/jquery.makeCollapsible.css" class="extiw" title="git:mediawiki/core/+/HEAD/resources/src/jquery/jquery.makeCollapsible.css">resources/src/jquery/jquery.makeCollapsible.css</a>). </p><p>Add the class <code>mw-collapsible</code> to any element (div, table, list, anything) to trigger it. </p><p>It does not work on <a href="/wiki/Special:MyLanguage/Skin:Minerva_Neue" title="Special:MyLanguage/Skin:Minerva Neue">Skin:Minerva Neue</a><span style="display:none"><a href="/wiki/Skin:Minerva_Neue" title="Skin:Minerva Neue"> </a></span> (<a href="https://phabricator.wikimedia.org/T111565" class="extiw" title="phab:T111565">phab:T111565</a>). </p><p>Please note that the built-in search of browsers doesn’t find content in collapsed elements (<a href="https://phabricator.wikimedia.org/T327893" class="extiw" title="phab:T327893">phab:T327893</a>). </p> <div class="mw-heading mw-heading3"><h3 id="Table">Table</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=2" title="Edit section: Table"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A table can be collapsed like any other element. The difference is that part of the table remains visible, even when collapsed. A table with a caption keeps the caption visible: </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"mw-collapsible"</span> <span class="p">|+</span><span class="gh"> Caption</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> Header 1</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> Header 2</span> <span class="p">|-</span> <span class="p">|</span> Data 1 <span class="p">|</span> Data 2 <span class="p">|}</span> </pre></div> <table class="mw-collapsible wikitable"> <caption>Caption </caption> <tbody><tr> <th scope="col">Header 1 </th> <th scope="col">Header 2 </th></tr> <tr> <td>Data 1 </td> <td>Data 2 </td></tr></tbody></table> <p>A table without a caption keeps the first row visible: </p> <div class="mw-highlight mw-highlight-lang-mediawiki mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">role</span><span class="o">=</span><span class="s2">"presentation"</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"mw-collapsible"</span> <span class="p">|-</span> <span class="p">|</span> Lorem <span class="p">|</span> ipsum <span class="ni">&amp;</span>nbsp; <span class="p">|-</span> <span class="p">|</span> dolor <span class="p">|</span> sit <span class="p">|}</span> </pre></div> <p>Result: </p> <table role="presentation" class="mw-collapsible wikitable"> <tbody><tr> <td>Lorem </td> <td>ipsum   </td></tr> <tr> <td>dolor </td> <td>sit </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="With_specified_initial_state">With specified initial state</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=3" title="Edit section: With specified initial state"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You can add <code>mw-collapsed</code> after <code>mw-collapsible</code> to have the content collapsed by default when you load the page. </p><p>To set the initial state as collapsed add "<code>mw-collapsed</code>", such as seen in the following table: </p> <div class="mw-highlight mw-highlight-lang-mediawiki mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"mw-collapsible mw-collapsed wikitable"</span> <span class="p">!</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> The header remains visible. &amp;nbsp;</span> <span class="p">|-</span> <span class="p">|</span> This content <span class="p">||</span> is hidden <span class="p">|-</span> <span class="p">|</span> at first <span class="p">||</span> load time <span class="p">|}</span> </pre></div> <table class="mw-collapsible mw-collapsed wikitable"> <tbody><tr> <th colspan="2">The header remains visible.   </th></tr> <tr> <td>This content</td> <td>is hidden </td></tr> <tr> <td>at first</td> <td>load time </td></tr></tbody></table> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"mw-collapsible mw-collapsed wikitable"</span> <span class="p">|+</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s">white-space:nowrap</span><span class="w"> </span><span class="p">|</span><span class="gh"> The caption remains visible. </span> <span class="p">|-</span> <span class="p">!</span><span class="gu"> Text </span><span class="p">!!</span><span class="gu"> More text</span> <span class="p">|-</span> <span class="p">|</span> This content <span class="p">||</span> is hidden <span class="p">|-</span> <span class="p">|</span> at first <span class="p">||</span> load time <span class="p">|}</span> </pre></div> <table class="mw-collapsible mw-collapsed wikitable"> <caption style="white-space:nowrap">The caption remains visible. </caption> <tbody><tr> <th>Text</th> <th>More text </th></tr> <tr> <td>This content</td> <td>is hidden </td></tr> <tr> <td>at first</td> <td>load time </td></tr></tbody></table> <p>You can add a padded border around the caption to make it easier to see that it is a collapsed table: </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span>|+ style="white-space:nowrap; border:1px solid; padding:3px;" | The caption remains visible. </pre></div> <table class="mw-collapsible mw-collapsed wikitable"> <caption style="white-space:nowrap; border:1px solid; padding:3px;">The caption remains visible. </caption> <tbody><tr> <th>Text</th> <th>More text </th></tr> <tr> <td>This content</td> <td>is hidden </td></tr> <tr> <td>at first</td> <td>load time </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="Simple">Simple</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=4" title="Edit section: Simple"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cm"></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toccolours mw-collapsible"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width:400px; overflow:auto;"</span><span class="p">></span> This text is collapsible. {{Lorem}} <span class="p"></</span><span class="nt">div</span><span class="p">></span> </pre></div> <p>Result: </p> <div class="toccolours mw-collapsible" style="width:400px; overflow:auto;"> This text is collapsible. <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> <p>Using the <code>data-collapsetext</code> and <code>data-expandtext</code> attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-collapsible"</span> <span class="na">data-expandtext</span><span class="o">=</span><span class="s">"{{int:show}}"</span> <span class="na">data-collapsetext</span><span class="o">=</span><span class="s">"{{int:hide}}"</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Simple_with_title">Simple with title</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=5" title="Edit section: Simple with title"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toccolours mw-collapsible"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width:400px; overflow:auto;"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"font-weight:bold;line-height:1.6;"</span><span class="p">></span>Lorem ipsum sample<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-collapsible-content"</span><span class="p">></span> This text is collapsible. {{Lorem}} <span class="p"></</span><span class="nt">div</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> </pre></div> <p>Result: </p> <div class="toccolours mw-collapsible" style="width:400px; overflow:auto;"> <div style="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div> <div class="mw-collapsible-content"> This text is collapsible. <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 class="mw-heading mw-heading3"><h3 id="With_specified_collapsible_part">With specified collapsible part</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=6" title="Edit section: With specified collapsible part"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>By default, a collapsible non-table element collapses completely. </p><p>To keep some content visible, even when collapsed, you can specify which part is the collapsible content. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"toccolours mw-collapsible mw-collapsed"</span><span class="p">></span> This text is not collapsible; but the next is collapsible and hidden by default: <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-collapsible-content"</span><span class="p">></span>{{Lorem}}<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </pre></div> <p>Result: </p> <div class="toccolours mw-collapsible mw-collapsed"> <p>This text is not collapsible; but the next is collapsible and hidden by default: </p> <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 class="mw-heading mw-heading3"><h3 id="Custom_toggle_link_placement">Custom toggle link placement</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=7" title="Edit section: Custom toggle link placement"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r4199130">.mw-parser-output .mw-version{border:1px solid #72777d;font-size:80%;line-height:1.2;border-collapse:collapse}.mw-parser-output .mw-version-ltr{float:right;margin:0 0 .5em .5em;text-align:right}.mw-parser-output .mw-version-rtl{float:left;margin:0 .5em .5em 0;text-align:left}.mw-parser-output .mw-version td{padding:.1em .3em}.mw-parser-output .mw-version-versionbox{border:5px solid #00af89;text-align:center}.mw-parser-output .mw-version-versionnumber{font-weight:bold;font-size:180%}.mw-parser-output .mw-version-version .mw-version-versionbox{border-color:#c8ccd1}.mw-parser-output .mw-version.mw-version-version2 .mw-version-versionbox{border-top-color:#c8ccd1;border-right-color:#c8ccd1;border-left-color:#c8ccd1}.mw-parser-output .mw-version-version-unsupported .mw-version-versionbox{border-color:#d33}.mw-parser-output .mw-version.mw-version-version2-unsupported .mw-version-versionbox{border-top-color:#d33;border-right-color:#d33;border-left-color:#d33}.mw-parser-output .mw-version-version-legacy .mw-version-versionbox{border-color:#f93}.mw-parser-output .mw-version.mw-version-version2-legacy .mw-version-versionbox{border-top-color:#f93;border-right-color:#f93;border-left-color:#f93}.mw-parser-output .mw-version-version-stable .mw-version-versionbox,.mw-parser-output .mw-version.mw-version.mw-version-and-later .mw-version-versionbox{border-color:#00af89}.mw-parser-output .mw-version.mw-version-version2-stable .mw-version-versionbox{border-top-color:#00af89;border-right-color:#00af89;border-left-color:#00af89}.mw-parser-output .mw-version-version-future .mw-version-versionbox{border-color:#8080c0}.mw-parser-output .mw-version.mw-version-version2-future .mw-version-versionbox{border-top-color:#8080c0;border-right-color:#8080c0;border-left-color:#8080c0}.mw-parser-output .mw-version-version-alpha .mw-version-versionbox{border-style:dotted}</style> <table class="mw-version mw-version-ltr mw-version-version mw-version-version-legacy mw-version-and-later"><tbody><tr> <td>MediaWiki version:</td> <td class="mw-version-versionbox" title="The latest stable version is 1.42"><div class="mw-version-versionnumber"><small>≥</small> 1.41</div></td> </tr></tbody></table> <p>You can control where inside the collapsible element the toggle link goes by placing an element with the class <code>mw-collapsible-toggle-placeholder</code> inside it. The placeholder will be completely replaced with a standard toggle link, at the exact position in the DOM where you put the placeholder. See the <a href="/wiki/Manual:Collapsible_elements/Demo/Advanced#Custom_toggle_link_placement" title="Manual:Collapsible elements/Demo/Advanced">advanced demo</a> for an example. </p><p>You will want to combine this with a specified collapsible part (see <a href="#With_specified_collapsible_part">above</a>), and put the placeholder outside the <code>mw-collapsible-content</code> element, to ensure that the toggle is still reachable in the collapsed state. </p> <div class="mw-heading mw-heading3"><h3 id="With_custom_toggle_link">With custom toggle link</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=8" title="Edit section: With custom toggle link"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r6651107">.mw-parser-output .note{background-position:left 7px top 50%;padding:0.5em 0.5em 0.5em 40px;margin:0.5em 0;overflow:hidden;background-color:#f8f9fa;color:#333;background-repeat:no-repeat;border:1px solid #ddd}.mw-parser-output .note-inline{display:inline-block;vertical-align:middle}.mw-parser-output .note-info{background-color:#eaf3ff;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg");background-size:25px;border-color:#a3caff;padding-left:40px;min-height:25px}.mw-parser-output .note-reminder{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-warn{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-error{background-color:#fee7e6;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg");background-size:25px;border-color:#c33;min-height:25px}@media screen{html.skin-theme-clientpref-night .mw-parser-output .note{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .note{background-color:transparent;color:inherit}}</style><div role="note" class="note note-info">This method is inaccessible and confusing to screenreader users. Avoid using it</div> <p>If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside <i>or</i> outside the collapsible element. Its relationship to the collapsible element is detected by using an ID attribute with the prefix <code>mw-customcollapsible</code> and a corresponding class attribute with prefix <code>mw-customtoggle</code> for the collapsible element and the togglelink respectively. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-customtoggle-myDivision"</span><span class="p">></span>Toggle link<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-collapsible mw-collapsed"</span> <span class="na">id</span><span class="o">=</span><span class="s">"mw-customcollapsible-myDivision"</span><span class="p">></span>Toggled text<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-customtoggle-myDivision"</span><span class="p">></span>Additional toggle link<span class="p"></</span><span class="nt">span</span><span class="p">></span> </pre></div> <p>Result: </p><p><span class="mw-customtoggle-myDivision">Toggle link</span> </p> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div> <p><span class="mw-customtoggle-myDivision">Additional toggle link</span> </p> <div class="mw-heading mw-heading3"><h3 id="Inside_another_element">Inside another element</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=9" title="Edit section: Inside another element"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You can also use collapsible elements in other elements, such as a table. </p> <table class="wikitable sortable"> <caption>My table with collapsible info </caption> <tbody><tr> <th>Title </th> <th>Sample </th></tr> <tr> <td>Lorem </td> <td>Ipsum </td></tr> <tr> <td>More info </td> <td> <table class="wikitable mw-collapsible mw-collapsed" style="width:100%; margin:0;"> <tbody><tr> <th>Number </th> <th>Letter   </th></tr> <tr> <td>1 </td> <td>A </td></tr> <tr> <td>2 </td> <td>B </td></tr> <tr> <td>3 </td> <td>C </td></tr></tbody></table> </td></tr></tbody></table> <div style="clear: both;"></div> <div class="mw-heading mw-heading3"><h3 id="Move_toggle_link_to_the_left">Move toggle link to the left</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=10" title="Edit section: Move toggle link to the left"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Wide images and long bare URLs in collapsible tables or elements can cause the toggle link to go offscreen to the right when expanded. In cell phones for example. Sometimes it is difficult or impossible to get over to the toggle link to click it and close it. The following CSS puts the toggle link all the way to the left, and leaves a little space between it and the text to its right. The toggle link position does not change as the table or element is expanded or collapsed. Place the CSS in common.css by editing page "MediaWiki:Common.css". Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see <a rel="nofollow" class="external text" href="http://cannabis.shoutwiki.com/wiki/MediaWiki:Common.css">common.css</a>, <a rel="nofollow" class="external text" href="http://cannabis.shoutwiki.com/wiki/MediaWiki:Mobile.js">mobile.js</a>, and <a rel="nofollow" class="external text" href="http://cannabis.shoutwiki.com/wiki/MediaWiki:Mobile.css">mobile.css</a> </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Collapsible elements. Toggle-link moved to left.</span> <span class="c">/* Margin around it adjusted. */</span> <span class="p">.</span><span class="nc">mw-collapsible</span><span class="w"> </span><span class="nt">span</span><span class="p">.</span><span class="nc">mw-collapsible-toggle</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">float</span><span class="p">:</span><span class="kc">left</span><span class="p">;</span> <span class="w"> </span><span class="k">margin-left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span> <span class="w"> </span><span class="k">margin-right</span><span class="p">:</span><span class="mi">1</span><span class="kt">em</span><span class="p">;</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Removing_brackets_from_the_toggle">Removing brackets from the toggle</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=11" title="Edit section: Removing brackets from the toggle"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>If you want to hide the brackets in the default or custom label toggle links (for aesthetic or other reasons): </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">mw-collapsible-toggle-default</span><span class="p">:</span><span class="nd">before</span><span class="o">,</span><span class="w"> </span><span class="p">.</span><span class="nc">mw-collapsible-toggle-default</span><span class="p">:</span><span class="nd">after</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Manual:Collapsible_elements&action=edit&section=12" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="https://en.wikipedia.org/wiki/Help:Table" class="extiw" title="en:Help:Table">en:Help:Table</a></li></ul>    </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&oldid=6620646">https://www.mediawiki.org/w/index.php?title=Manual:Collapsible_elements&oldid=6620646</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:Manual" title="Category:Manual">Manual</a></li></ul></div></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 7 July 2024, at 10:01.</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&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-58c5c47db8-2qslb","wgBackendResponseTime":134,"wgPageParseReport":{"limitreport":{"cputime":"0.256","walltime":"1.312","ppvisitednodes":{"value":879,"limit":1000000},"postexpandincludesize":{"value":6476,"limit":2097152},"templateargumentsize":{"value":1648,"limit":2097152},"expansiondepth":{"value":13,"limit":100},"expensivefunctioncount":{"value":16,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":15697,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 945.393 1 -total"," 4.98% 47.037 3 Template:Ll"," 3.81% 36.002 1 Template:MW_1.41"," 3.60% 34.013 1 Template:MW_version"," 3.14% 29.694 1 Template:MW_version/layout"," 2.78% 26.260 6 Template:Translatable"," 1.92% 18.111 3 Template:Pagelang"," 1.59% 15.024 3 Template:Lorem"," 1.47% 13.852 1 Template:Note"," 0.88% 8.310 1 Template:Hatnote"]},"scribunto":{"limitreport-timeusage":{"value":"0.007","limit":"10.000"},"limitreport-memusage":{"value":994595,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-6b68c86545-x7frj","timestamp":"20241202123151","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>