연습장:Sakura/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>