문서를 비움 태그: 비우기 수동 되돌리기 |
편집 요약 없음 태그: 되돌려진 기여 |
||
| 1번째 줄: | 1번째 줄: | ||
<onlyinclude><div id="toggle{{{id|jwiki-1}}}" class="toggleBtn" data-target="collapsible{{{id|jwiki-1}}}" style="text-align: center; color: {{{titlecolor|#373a3c}}}; margin: 0px -10px -2px; padding: 0px 10px 2px; {{{divstyle|}}}">{{{title|[ 펼치기 · 접기 ]}}}</div> | |||
<div id="collapsible{{{id|jwiki-1}}}" style="display: none; margin: 0px -13px 4px -15px; background: none; border: 1px solid transparent;"> | |||
{|class="wikitable {{{class|}}}" {{{tag|}}} style="margin-top: 5px; margin-left: 4px; margin-right: 1px; margin-bottom: -10.5px; width: {{{width|calc(100% - 6px)}}}; {{{style|}}}"</onlyinclude> | |||
| 이곳에 접힌 콘텐츠 | |||
|}</div> | |||
{{설명문서}} | |||
<html><style> | |||
.toggleBtn { | |||
font-weight: bold; | |||
cursor: pointer; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
}</style> | |||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |||
<script> | |||
$(document).ready(function() { | |||
var toggleBtns = $('.toggleBtn'); | |||
toggleBtns.each(function() { | |||
var toggleId = $(this).attr("id"); | |||
var contentId = toggleId.replace("toggle", "collapsible"); | |||
var content = $("#" + contentId); | |||
var toggleTextId = toggleId.replace("toggle", "toggleText"); | |||
var toggleText = $("#" + toggleTextId); | |||
content.hide(); | |||
$(this).click(function() { | |||
content.slideToggle(300); | |||
if (content.css("display") == "none") { | |||
toggleText.html("[ 펼치기 · 접기 ]"); | |||
} else { | |||
toggleText.html("[ 펼치기 · 접기 ]"); | |||
} | |||
}); | |||
}); | |||
}); | |||
</script> | |||
</html> | |||