类似{{Hide}}的功能。不同于{{Hide}}只能按键展开折叠,本模板展开的响应范围是整段文字和图片。
{{Toggle |button= |content= }}
{{Toggle |button= 上方内容 |content= 隐藏内容 }}
你可以点击下面文字来看到隐藏信息。
隐藏内容
{{Toggle |button= '''メルト''' |content= {{BilibiliVideo|id=188136|page=3}} }} {{Toggle |button= '''メルト2M MIX''' |content= {{BilibiliVideo|id=39890}} }}
你可以点击下面文字来看到隐藏信息。
{{Toggle |button= [[File:18077635 big p2.jpg|200px]] |content= Illustration by {{lj|倉澤もこ}} }}
你可以点击下面图片来看到隐藏信息。
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>
直接使用模板会造成如下情况:无法显示编辑按钮。
之所以在本页面没有区别,是因为本模板页面有编辑保护,无法显示编辑按钮。请点击此处查看正常视图。
请注意,所有包含在模板内的标题都会出现这种情况,所以应尽量避免在模板内使用标题。
默认button与content之间会有一个{{clear}},这可能导致toggle与infobox等浮动元素兼容性较差。可以通过传入noclear
参数覆盖。
{{Toggle |button=按钮 |content=文字 |noclear=true }}
文字紧跟着按钮。
对比不传入noclear
的版本:
文字在浮动元素的下方。
clear:both