模板:Toggle
跳至導覽
跳至搜尋
類似{{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|倉澤もこ}} }}
你可以點擊下面圖片來看到隱藏信息。
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