|
|
| 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>
| |