查看“︁模板:Toggle/doc”︁的源代码

本模板搬运自萌娘百科。本网站有variable扩展。
类似{{tl|Hide}}的功能。不同于{{tl|Hide}}只能按键展开折叠，本模板展开的响应范围是整段文字和图片。
__NOTOC__
== 用法 ==
<pre>
{{Toggle
|button= 
|content= 
}}
</pre>

*使用该模板时最好有注明能展开的提示

== 范例 ==
<pre>
{{Toggle
|button= 上方内容
|content= 隐藏内容
}}
</pre>
你可以点击下面文字来看到隐藏信息。
<div class="mw-customtoggle-ToggleDoc_范例" style="cursor:pointer" title="">上方内容</div><div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_范例">隐藏内容</div>

=== 多个使用 ===
<pre>
{{Toggle
|button= '''メルト'''
|content= {{BilibiliVideo|id=188136|page=3}}
}}
----
{{Toggle
|button= '''メルト2M MIX'''
|content= {{BilibiliVideo|id=39890}}
}}
</pre>
你可以点击下面文字来看到隐藏信息。
<div class="mw-customtoggle-ToggleDoc_多个使用1" style="cursor:pointer" title="">'''メルト'''</div><div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个使用1">{{BilibiliVideo|id=188136|page=3}}</div>
<hr>
<div class="mw-customtoggle-ToggleDoc_多个使用2" style="cursor:pointer" title="">'''メルト2M MIX'''</div><div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个使用2">{{BilibiliVideo|id=39890}}</div>

=== 使用图片 ===
<pre>
{{Toggle
|button= [[File:18077635 big p2.jpg|200px]]
|content= Illustration by {{lj|倉澤もこ}}
}}
</pre>
你可以点击下面图片来看到隐藏信息。
<div class="mw-customtoggle-ToggleDoc_使用图片" style="cursor:pointer" title="">[[File:18077635 big p2.jpg|frameless|200px|link=]]</div><div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_使用图片">Illustration by {{lj|倉澤もこ}}</div>

=== 内容中含有标题时 ===
<pre>
{{#vardefine:toggle_id|{{#expr:{{#var:toggle_id|0}}+1}}}}<div class="mw-customtoggle-{{#var:toggle_id}}" style="cursor:pointer">上方内容</div>
<div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{#var:toggle_id}}">
== 含有标题的隐藏内容 ==
</div>
</pre>
当隐藏内容中含有标题时，应当把要隐藏的内容放置在以上HTML代码中<code><nowiki></div></nowiki></code>的上方来实现该功能，以确保标题的正常显示。

为了[[Special:滥用过滤器/103|<del title="滥用过滤器已更新，更改后，触发条件和名称存在差异">避免在内容页面中使用var</del>]]，可去除<code><nowiki>{{#vardefine:toggle_id}}</nowiki></code>，并将<code><nowiki>{{#var:toggle_id}}</nowiki></code>替换成不会造成id重复的其他内容（非纯数字即可）。
<pre>
<div class="mw-customtoggle-hidden_content_with_title" style="cursor:pointer">上方内容</div>
<div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-hidden_content_with_title">
== 含有标题的隐藏内容 ==
</div>
</pre>
<div class="mw-customtoggle-hidden_content_with_title" style="cursor:pointer">上方内容</div>
<div style="clear:both"></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-hidden_content_with_title">

=== 含有标题的隐藏内容 ===
</div>
----
*;注意：直接使用此模板时，标题后方将不会自动添加编辑按钮，请通过{{tl|1=Edit|section=<nowiki><小节序号></nowiki>}}手动添加对应按钮。
<div class="mw-customtoggle-ToggleDoc_含有标题的隐藏内容2" style="cursor:pointer" title="">上方内容</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_含有标题的隐藏内容2">

=== 含有标题的隐藏内容 ===
</div>


未发现编辑按钮的原因是本模板页面有编辑保护，不会自动添加编辑按钮。请通过说明文档原页面查看正常视图。[[Template:Toggle/doc#内容中含有标题时|点击跳转]]

'''请注意'''，所有包含在模板内的标题都会出现这种情况，所以应尽量避免在模板内使用标题。

=== 与infobox兼容 ===
默认button与content之间会有一个{{tl|clear}}，这可能导致toggle与infobox等浮动元素兼容性较差。可以通过传入<code>noclear</code>参数覆盖。
<pre>
{{Toggle
|button=按钮
|content=文字
|noclear=true
}}
{{clear}}
</pre>
<div style="float:right;border:thin solid #000;height:10em;">这是一个很长的浮动元素，例如infobox</div>
<div class="mw-customtoggle-ToggleDoc_infobox兼容1" style="cursor:pointer" title="">按钮</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_infobox兼容1">文字紧跟着按钮。</div>
{{clear}}
----
对比不传入<code>noclear</code>的版本：
<div style="float:right;border:thin solid #000;height:10em;">这是一个很长的浮动元素，例如infobox</div>
<div class="mw-customtoggle-ToggleDoc_infobox兼容2" style="cursor:pointer" title="">按钮</div>{{clear}}
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_infobox兼容2">文字在浮动元素的下方。</div>
===存在多个按钮和受控内容的情形===
可使用自定义标签，指定用于控制显示的按钮和受到控制的页面。同一标签下的不同按钮，都会控制同一标签下不同位置的内容。
*此处自定义标签：<code>ToggleDoc_多个按钮和内容</code>
<pre class="prettyprint linenums lang-HTML">
这里存在三个按钮，这三个按钮都会控制下方内容的展示情况，你也可以<span class="mw-customtoggle-ToggleDoc_多个按钮和内容" style="cursor:pointer; display:inline-block;" title="点我试试">{{Keypress|点我试试}}</span>。
<div class="mw-ui-button						mw-customtoggle-ToggleDoc_多个按钮和内容" 
	style="cursor:pointer;display:inline-block;" title="按钮1">按钮1</div>
<div class="mw-ui-button	mw-ui-progressive	mw-customtoggle-ToggleDoc_多个按钮和内容" 
	style="cursor:pointer;display:inline-block;" title="按钮2">按钮2</div>
<div class="mw-ui-button	mw-ui-destructive	mw-customtoggle-ToggleDoc_多个按钮和内容" 
	style="cursor:pointer;display:inline-block;" title="按钮3">按钮3</div>
<hr/>
这是第一行。
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个按钮和内容">这是隐藏的第二行。</div>
这是第三行。
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个按钮和内容">这是隐藏的第四行。</div>
这是第五行。
</pre>
这里存在三个按钮，这三个按钮都会控制下方内容的展示情况，你也可以<span class="mw-customtoggle-ToggleDoc_多个按钮和内容" style="cursor:pointer; display:inline-block;" title="点我试试">{{Keypress|点我试试}}</span>。
<div class="mw-ui-button mw-customtoggle-ToggleDoc_多个按钮和内容" style="cursor:pointer;display:inline-block;" title="按钮1">按钮1</div>
<div class="mw-ui-button mw-ui-progressive mw-customtoggle-ToggleDoc_多个按钮和内容" style="cursor:pointer;display:inline-block;" title="按钮2">按钮2</div>
<div class="mw-ui-button mw-ui-destructive mw-customtoggle-ToggleDoc_多个按钮和内容" style="cursor:pointer;display:inline-block;" title="按钮3">按钮3</div>
<hr/>
这是第一行。
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个按钮和内容">这是隐藏的第二行。</div>
这是第三行。
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ToggleDoc_多个按钮和内容">这是隐藏的第四行。</div>
这是第五行。

== 衍生 ==
*{{tl|Toggle pic}}，为使用图片而设计，可以调整占据的空间。
*{{tl|Toggle pics}}，方便大量使用图片而设计。
*{{tl|ToggleInline}}，可使button与content处在同一行
*{{tl|Toggle2}}，去除了<code><nowiki>clear:both</nowiki></code>

<includeonly>[[Category:功能模板]]</includeonly>
<noinclude>[[Category:模板文档]]</noinclude>