置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

Template:Toggle/doc

猛汉♂百科,万男皆可猛的百科全书!转载请标注来源页面的网页链接,并声明引自猛汉百科。内容不可商用。
跳到导航 跳到搜索

类似{{Hide}}的功能。不同于{{Hide}}只能按键展开折叠,本模板展开的响应范围是整段文字和图片。

用法

{{Toggle
|button= 
|content= 
}}
  • 使用该模板时最好有注明能展开的提示

范例

{{Toggle
|button= 上方内容
|content= 隐藏内容
}}

你可以点击下面文字来看到隐藏信息。

上方内容

隐藏内容


多个使用

{{Toggle
|button= '''メルト'''
|content= {{BilibiliVideo|id=188136|page=3}}
}}
{{Toggle
|button= '''メルト2M MIX'''
|content= {{BilibiliVideo|id=39890}}
}}

你可以点击下面文字来看到隐藏信息。

メルト
宽屏模式显示视频

メルト2M MIX
宽屏模式显示视频

使用图片

{{Toggle
|button= [[File:18077635 big p2.jpg|200px]]
|content= Illustration by {{lj|倉澤もこ}}
}}

你可以点击下面图片来看到隐藏信息。

18077635 big p2.jpg

Illustration by 倉澤もこ

内容中含有标题时

{{#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>

当隐藏内容中含有标题时,应当把要隐藏的内容放置在以上HTML代码中</div>的上方来实现该功能,以确保标题的正常显示。

为了避免在内容页面中使用var,可去除{{#vardefine:toggle_id}},并将{{#var:toggle_id}}替换成不会造成id重复的其他内容(非纯数字即可)。

<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>
上方内容

含有标题的隐藏内容


直接使用模板会造成如下情况:无法显示编辑按钮。

上方内容

含有标题的隐藏内容

之所以在本页面没有区别,是因为本模板页面有编辑保护,无法显示编辑按钮。请点击此处查看正常视图。

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

与infobox兼容

默认button与content之间会有一个{{clear}},这可能导致toggle与infobox等浮动元素兼容性较差。可以通过传入noclear参数覆盖。

{{Toggle
|button=按钮
|content=文字
|noclear=true
}}
这是一个很长的浮动元素,例如infobox
按钮

文字紧跟着按钮。

对比不传入noclear的版本:

这是一个很长的浮动元素,例如infobox
按钮

文字在浮动元素的下方。

衍生

  • {{Toggle pic}},为使用图片而设计,可以调整占据的空间。
  • {{Toggle pics}},方便大量使用图片而设计。
  • {{ToggleInline}},可使button与content处在同一行
  • {{Toggle2}},去除了clear:both