틀:펼치기 접기

분류:

틀:펼치기 접기
사용문서	새로고침
넘겨주기	이동하기
2025-04-11에 마지막으로 수정됨
css

[ 주요 업데이트 노트 ]

2023.05.25	PC와 모바일에서 여백 값 따로 지정
2024.05.19	여백 값 일부 수정 및 PC와 모바일에서 여백 값 통일
2024.07.02	multi 변수를 사용해 한 줄에 여러 개의 접기를 넣었을 때 펼쳐진 접기의 제목은 한 줄을 모두 차지하도록 변경

다른 뜻에 대한 내용은 아래 문서를 참고하십시오.

틀의 원리: 도움말:위키 문법 문서의 표에서 응용하기 문단
한 줄에 여러 개의 접기를 넣는 틀: 틀:펼치기 접기/multi
애니메이션이 없는 커스텀 접기로 만든 같은 틀: 틀:나무위키 틀 접기
애니메이션이 있는 커스텀 접기 간략화 틀: 틀:나무위키 접기2

틀의 margin과 padding 값은 가능한 수정하지 말아 주세요. 현재 값은 브라우저의 F12 개발자 도구로 위키에 적용된 정확한 값을 수정한 것입니다.

틀 본문

설명

사용자:Kimchan의 틀을 바탕으로 나무위키처럼 애니메이션 효과가 추가된 틀입니다. 아래의 설명 역시 부분만 변형했습니다.

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

환경설정의 편집 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 편집 미리보기에서 접기가 작동하지 않습니다.

변수

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

사용법

틀 접기가 들어갈 행에 이 틀을 넣고, 그 다음 새 행부터 시작하면 됩니다. 즉 틀:전설의 기수를 예로 들면 다음과 같습니다.

{|class="wikitable" style="width: 100%; border: 2px solid #00beff; text-align: center;"
|-
!style="background: #00beff;"|{{cl|전설의 기수|white}}
|-
|{{펼접|id=legend-period-about-template|style=table-layout: fixed;}}
|-
|{{cl|강수진|default}}
|{{cl|길령|default}}
…

틀 안에 div와 테이블 문법이 시작되어 있고 닫혀 있는 문법은 없으므로, 작성할 내용을 모두 작성한 후 테이블을 종료할 땐 틀:펼접끝을 넣어 주거나 |}</div>를 넣어 주어야 합니다. 마찬가지로 틀:전설의 기수를 예로 들면 다음과 같습니다.

…
|{{cl|임봄|default}}
|{{cl|황민호|default}}
|-
|colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}}
{{펼접끝}}
|}

…
|{{cl|임봄|default}}
|{{cl|황민호|default}}
|-
|colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}}
|}
</div>
|}

사용 예제

문법

[ 문법 펼치기 · 접기 ]

{|class="wikitable" style="text-align: center;"
|-
|틀 사용
|-
|{{펼접|id=example-one}}
|-
|내용내용내용내용내용내용내용내용
|-
|내용내용내용내용내용내용내용내용
{{펼접끝}}
|}

결과

틀 미사용

[ 펼치기 · 접기 ]

내용내용내용내용내용내용내용내용
내용내용내용내용내용내용내용내용

틀 사용

[ 펼치기 · 접기 ]

내용내용내용내용내용내용내용내용
내용내용내용내용내용내용내용내용

한 줄에 여러 개의 접기

새로운 변수들을 사용합니다.

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

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