<table class="bd_lst bd_tb_lst bd_tb common_notice">
    <tr loop="$notice_list=>$no,$document" class="notice">
        <td cond="$list_config['no']">{$lang->notice}</td>
        <td class="title"><a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a></td>
        <td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
        <td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
        <td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
    </tr>
</table>

<var name="notice_view_slide" type="radio">
    <title xml:lang="ko">공지사항 슬라이드 출력</title>
    <options value="">
        <title xml:lang="ko">일반출력(기본)</title>
    </options>
    <options value="Y">
        <title xml:lang="ko">슬라이드출력</title>
    </options>
    <description xml:lang="ko">공지사항 클릭시 슬라이드 형식 출력을 선택합니다.</description>
</var>

<table class="bd_lst bd_tb_lst bd_tb common_notice">
    <tr loop="$notice_list=>$no,$document" class="notice">
        <td $list_config['no']">{$lang->notice}</td>
        <td class="title">
            <!--// 공지사항 일반 출력 -->
            <a cond="$mi->notice_view_slide ==''" href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a>

            
            <!--// 공지사항 슬라이드 출력 -->
            <details cond="!$mi->notice_view_slide ==''" class="accordion">
                <summary class="notice_fold">
                    <strong>{$document->getTitle($mi->subject_cut_size)}</strong>
                </summary>

                    <p style="margin-top:10px">
                    <span>{$document->getContent(false)}</span>

                    <div style="text-align:right; float:left; padding-bottom:5px; width:100%">
                    <div style="float:right">
                        <a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}" class="btn"><span>공지글 보기</span></a>

                        <!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
                          <a href="{getUrl('act','dispBoardWriteComment','document_srl',$document->document_srl)}" class="btn"><span>{$lang->cmd_comment_registration}</span></a>
                        <!--@end-->
                        
                        <!--@if($document->isEditable())-->
                        <!--@if(!( !$grant->manager && $document->getCommentCount()))-->    
                          <a href="{getUrl('act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_modify}</span></a>
                        <!--@end-->
                        <!--@if(!( !$grant->manager && $oDocument->getCommentCount()))-->    
                          <a href="{getUrl('act','dispBoardDelete','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_delete}</span></a>
                        <!--@end-->
                      <!--@end-->
                      </div>
                    </div>
                    <style>
                        summary.notice_fold::-webkit-details-marker { display: none; }
                        summary.notice_fold { display: block; }
                        summary.notice_fold { position: relative; padding-left: 1.2em; cursor: pointer; }
                        summary.notice_fold::before { content: ""; position: absolute;     border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.75em solid yellowgreen;     top: 0.2em; left: 0; transition: .25s transform; }
                        details[open] summary:before { transform: rotateZ(90deg); }
                    </style>
            </details>
        </td>
        <td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
        <td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
        <td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
    </tr>
</table>
 

<script cond="!$mi->notice_view_slide ==''" >
    <!--// 한개의 공지내용만 Open -->
    const detailsList = document.querySelectorAll('.accordion');

    for (const details of detailsList) {
    details.addEventListener('click', () => {
        if (details.open) {
            // 현재 열려 있는 details가 아닌 다른 details를 찾아 닫습니다.
            for (const otherDetails of detailsList) {
            if (otherDetails !== details && otherDetails.open) {
                otherDetails.open = false;
            }
        }

        // 화면 최상단으로 스크롤
        // window.scrollTo({ top: 0, behavior: 'smooth' });

        // 현재 열려 있는 details의 상단 위치를 계산합니다.
        const detailsTop = details.getBoundingClientRect().top;

        // 스크롤 위치를 details 상단에서 30px 위로 이동합니다.
        window.scrollTo({
            top: detailsTop - 30,
            behavior: 'smooth',
        });
        }
    });
    }

    <!--// 내용글 Open시 슬라이딩 효과 -->
    const $_details = $(".accordion");
    const $_summary = $_details.find(".notice_fold");

    $_summary.on("click", function(e) {
        e.preventDefault();

        const $_this = $(this);
        const $_this_details = $_this.parent("details");
        const $_this_details_p = $_this_details.find("p");
        const $_this_details_open = $_this_details.attr("open");

        if (! $_this_details_open) {
            $_this_details.prop("open", true);
            $_this_details_p.stop().slideDown(1000);
        } else {
            $_this_details_p.stop().slideUp(500, function() {
                $_this_details.prop("open", false);
            });
        }
    });
</script>