신사: 새 문서: {{목차제거}} {{다른 뜻2}} {|{{style|class=wiki|align=center}} |- !설명||문서||문단 |- |틀의 원리||도움말:위키 문법||표에서 응용하기 |- |한 줄에 여러 개의 접기를 넣는 틀||틀:펼치기 접기/multi |- |애니메이션이 없는 커스텀 접기로 만든 같은 틀||틀:나무위키 틀 접기 |- |애니메이션이 있는 커스텀 접기 간략화 틀||틀:나무위키...

2025-07-03T18:47:48Z

새 문서: {{목차제거}} {{다른 뜻2}} {|{{style|class=wiki|align=center}} |- !설명||문서||문단 |- |틀의 원리||도움말:위키 문법||표에서 응용하기 |- |한 줄에 여러 개의 접기를 넣는 틀||틀:펼치기 접기/multi |- |애니메이션이 없는 커스텀 접기로 만든 같은 틀||틀:나무위키 틀 접기 |- |애니메이션이 있는 커스텀 접기 간략화 틀||틀:나무위키...

새 문서

{{목차제거}}
{{다른 뜻2}}
{|{{style|class=wiki|align=center}}
|-
!설명||문서||문단
|-
|틀의 원리||[[도움말:위키 문법]]||[[도움말:위키 문법#표에서 응용하기|표에서 응용하기]]
|-
|한 줄에 여러 개의 접기를 넣는 틀||[[틀:펼치기 접기/multi]]
|-
|애니메이션이 없는 커스텀 접기로 만든 같은 틀||[[틀:나무위키 틀 접기]]
|-
|애니메이션이 있는 커스텀 접기 간략화 틀||[[틀:나무위키 접기2]]
|}
{{안내문|'''틀의 margin과 padding 값은 가능한 수정하지 말아 주세요.''' 현재 값은 브라우저의 F12 개발자 도구로 위키에 적용된 정확한 값을 수정한 것입니다.}}
== 틀 본문 ==
<onlyinclude><includeonly>{{css|펼치기 접기}}{{#css: .toggleBtn:has(+ #collapsible{{{id|jwiki-1}}}:not([style*="display"])) { width: calc(100% + 20px)!important; display: inline-block!important; margin: 0 -10px!important; } }}<div id="toggle{{{id|jwiki-1}}}" class="toggleBtn mobileBtn" data-target="collapsible{{{id|jwiki-1}}}" style="text-align: center; margin: 0 -10px; padding: 0 .6rem; color: {{color-var|{{{titlecolor|inherit}}}}}; text-align:{{{align|center}}}; white-space: nowrap; {{#ifeq:{{{복사방지|}}}|off||user-select: none;}} {{#if:{{{multi|}}}|display: inline-block; width: {{{multiwidth|}}};|}} {{{divstyle|}}}">{{#ifeq:{{{titletype|}}}|media|{{nobold|[{{가짜 링크|notitle=on|{{{title|보기}}}}}]}}|{{{title|[ 펼치기 · 접기 ]}}}}}</div>
<div id="collapsible{{{id|jwiki-1}}}" class="{{#if:{{{multi|}}}|{{#ifeq:{{{multi|}}}|bottom|folding-margin-remove-width|folding-margin-remove-width-multi}}|folding-margin-remove-width}}">
{|class="wikitable {{{class|}}}" {{{tag|}}} style="width: {{{width|100%}}}; margin: .3rem 0 {{#if:{{{multi|}}}|{{#ifeq:{{{multi|}}}|bottom|-.3rem|.3rem}}|-.3rem}}; {{#if:{{{max-width|}}}|max-width: {{{max-width|}}};|}} {{#if:{{{bg|}}}|background: {{{bg|}}};|}} {{#if:{{{text|}}}|text-align: {{{text|}}};|}} {{#if:{{{layout|}}}|table-layout: fixed;|}} {{{style|}}}"</includeonly></onlyinclude>
== 설명 ==
[[사용자:Kimchan]]의 [[틀:나무위키 틀 접기|틀]]을 바탕으로 나무위키처럼 애니메이션 효과가 추가된 틀입니다. 아래의 설명 역시 부분만 변형했습니다.

이 틀을 이용하면 마지막에 [[틀:펼치기 접기 끝]]을 넣어서 틀을 끝내줘야합니다.

[[특수:환경설정|환경설정]]의 [[특수:환경설정#mw-prefsection-editing|편집]] 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 '''편집 미리보기에서 접기가 작동하지 않습니다.'''

== 변수 ==
{|{{style|class=wiki|width=100%}}
|-
!colspan=2|모든 변수는 선택입니다.
|-
!id
|접기의 클래스와 아이디입니다. 입력하지 않으면 jwiki-1라는 아이디가 기본으로 입력되나, '''{{++1|반드시}} 입력할 것을 권장합니다.'''
|-
!title
|접기의 제목입니다. 입력하지 않으면 '''[ 펼치기 · 접기 ]'''가 기본으로 입력됩니다.
|-
!titlecolor
|접기 제목의 글씨 색입니다. 기본값은 부모 요소로부터 전해받는 inherit입니다. 이 틀이 들어가는 행의 배경 색에 따라, 또는 단지 꾸미고 싶을 때 다른 색으로 입력할 수 있습니다.
|-
!divstyle
|접기 제목이 들어가는 div의 style 태그에 추가로 넣을 코드를 입력할 수 있습니다.
|-
!class
|안쪽 테이블의 class를 지정할 수 있습니다.
|-
!style
|안쪽 테이블의 style 태그에 추가로 넣을 코드를 입력할 수 있습니다.
|-
!tag
|안쪽 테이블에 class나 style 외에 다른 태그를 추가로 입력할 수 있습니다.
|-
!width
|간혹 표 내의 크기 지정이 안되면 이용할 수 있습니다. 보통 문제가 생길시 auto만 입력해도 됩니다.
|-
!align
|제목의 위치를 조절합니다. left, center, right 등을 입력할 수 있습니다. 기본값은 center.
|}

== 사용법 ==
틀 접기가 들어갈 행에 이 틀을 넣고, 그 다음 새 행부터 시작하면 됩니다. 즉 [[틀:전설의 기수]]를 예로 들면 다음과 같습니다.
<nowiki>{|class="wikitable" style="width: 100%; border: 2px solid #00beff; text-align: center;"
|-
!style="background: #00beff;"|{{cl|전설의 기수|white}}
|-
|</nowiki>{{bold|<nowiki>{{펼접|id=legend-period-about-template|style=table-layout: fixed;}}</nowiki>}}<nowiki>
|-
|{{cl|강수진|default}}
|{{cl|길령|default}}
…</nowiki>

틀 안에 div와 테이블 문법이 시작되어 있고 닫혀 있는 문법은 없으므로, 작성할 내용을 모두 작성한 후 테이블을 종료할 땐 [[틀:펼접끝]]을 넣어 주거나 {{폰트|monospace|<nowiki>|}</div></nowiki>}}를 넣어 주어야 합니다. 마찬가지로 [[틀:전설의 기수]]를 예로 들면 다음과 같습니다.
{|class="wikitable" style="width: 100%; table-layout: fixed;"
|-
|
<nowiki>…
|{{cl|임봄|default}}
|{{cl|황민호|default}}
|-
|colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}}
</nowiki>{{bold|<nowiki>{{펼접끝}}</nowiki>}}<nowiki>
|}</nowiki>
|
<nowiki>…
|{{cl|임봄|default}}
|{{cl|황민호|default}}
|-
|colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}}
</nowiki>{{bold|<nowiki>|}
</div>
|}</nowiki>}}
|}

== 사용 예제 ==
{|{{style|class=wiki}}
|-
!문법
|{{folding|id=example|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="text-align: center;"
|-
|틀 사용
|-
|{{펼접|id=example-one}}
|-
|내용내용내용내용내용내용내용내용
|-
|내용내용내용내용내용내용내용내용
{{펼접끝}}
|}</pre>}}
|-
!결과
|style="vertical-align: top;"|<div style="display: inline-block; vertical-align: top;">
{|class="wikitable" style="text-align: center;"
|-
|틀 미사용
|-
|{{folding|id=example-two|align=center|
{{(!}}{{style|class=wiki|width=100%}}
{{!-}}
{{!}}{{style|bg=header}}{{!}}내용내용내용내용내용내용내용내용
{{!-}}
{{!}}{{style|bg=header}}{{!}}내용내용내용내용내용내용내용내용
{{!)}}}}
|}</div>{{여백}}<div style="display: inline-block; vertical-align: top;">
{|class="wikitable" style="text-align: center;"
|-
|틀 사용
|-
|{{펼접|id=example-one}}
|-
|{{style|bg=header}}|내용내용내용내용내용내용내용내용
|-
|{{style|bg=header}}|내용내용내용내용내용내용내용내용
{{펼접끝}}
|}</div>
|}

== 한 줄에 여러 개의 접기 ==
새로운 변수들을 사용합니다.

{|{{style|class=wiki|width=100%}}
|-
!변수||설명
|-
!multi
|본격적으로 여러 개의 접기를 선언하는 변수입니다. 아무 값이나 입력해도 되지만, '''가장 마지막에 오는 펼접 틀에서는 {{u|bottom}}으로 입력합니다.''' 모든 펼접 틀에 전부 입력해야 합니다.
|-
!multiwidth
|각 접기의 너비를 정합니다. 마찬가지로 모든 펼접 틀에 전부 입력해야 합니다.
|}

단순히 하나의 펼접 틀이 끝나는 곳, 즉 <nowiki>{{펼접끝}}</nowiki>이 오는 뒤에 새로운 펼접 틀을 이어서 작성하면 됩니다.

=== [[틀:펼치기 접기/multi]]와의 차이 ===
멀티 펼접 틀은 접기를 전부 펼치면 접기 제목은 여전히 그 줄에 전부 있고 테이블은 그 아래에 전부 있지만, 위 방법은 접기를 전부 펼치면 접기 제목이 해당하는 테이블의 윗줄에 놓이게 됩니다. {{--|나무위키에서는 이러한 형태의 접기 표에서 하나의 접기를 펼치면 펼쳐진 접기 제목은 온전한 한 줄을 차지하게 되는데{{--2|({{exhide|ex=off|type=namu|틀:역대 가톨릭 교황}} 참고. 직접 접기를 눌러보세요.)}} 이 부분은 제이위키 문법 한계상 구현할 수 없습니다.}} → 제이위키에서도 구현했습니다. 이제 나무위키처럼 펼쳐진 접기의 제목은 온전한 한 줄을 차지합니다. 나무위키의 예시로 링크한 {{exhide|ex=off|type=namu|틀:역대 가톨릭 교황}}과 유사한 디자인으로 만든 제이위키의 [[틀:교황]]이 있습니다.

{|{{style|class=wiki|width=100%|layout=on}}
|-
!문법||결과
|-
!colspan=2|멀티 틀
|-
|{{style|vertical=top}}|{{folding|id=gram1|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;"
|-
|틀 사용
|-
|{{펼접/mt
|id1=1|title1=[ 1의 제목 ]
|id2=2|title2=[ 2의 제목 ]
}}
{{펼접/mc|id=1}}
|-
|1의 내용
{{펼접끝}}
{{펼접/mc|id=2}}
|-
|2의 내용
{{펼접끝}}
|}</pre>}}
|{{style|vertical=top}}|
{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;"
|-
|틀 사용
|-
|{{펼접/mt
|width=2
|id1=1|title1=[ 1의 제목 ]
|id2=2|title2=[ 2의 제목 ]
}}
{{펼접/mc|id=1}}
|-
|1의 내용
{{펼접끝}}
{{펼접/mc|id=2}}
|-
|2의 내용
{{펼접끝}}
|}
|-
!colspan=2|멀티 변수
|-
|{{style|vertical=top}}|{{folding|id=gram2|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;"
|-
|변수 사용
|-
|{{펼접|id=3|title=　[ 1의 제목 ]　|multi=on}}
|-
|1의 내용
{{펼접끝}}
{{펼접|id=4|title=　[ 2의 제목 ]　|multi=bottom}}
|-
|2의 내용
{{펼접끝}}
|}</pre>}}
|{{style|vertical=top}}|
{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;"
|-
|변수 사용
|-
|{{펼접|id=3|title=　[ 1의 제목 ]　|multi=on|multiwidth=50%}}
|-
|1의 내용
{{펼접끝}}
{{펼접|id=4|title=　[ 2의 제목 ]　|multi=bottom|multiwidth=50%}}
|-
|2의 내용
{{펼접끝}}
|}
|}

== 기타 ==
* {{css/s}}

== 둘러보기 ==
{{나무위키 형식 틀 모음}}
{{문서 가져옴|틀:펼치기 접기/설명문서|392539}}

틀:펼치기 접기 - 편집 역사