본문 하단, 자세히보기 및 접기 버튼 기능 설명

01. view.skin.php

    <div id="bo_v_act">
        <span class="bo_v_act_gng">
            <a href="#">
                <img src="<?php echo $board_skin_url ?>/img/exclamation-circle-solid.svg" alt="소개">
                <span class="font-B">공유하고, 소통하다</span>
            </a>
        </span>
        <span class="bo_v_act_gng">
            <p>빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. 
                <span class="expand-btn" data-target="moreInfo1">... 자세히보기</span></p>
            <div id="moreInfo1" class="more-content">
                <br>
                <p>또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. <span class="collapse-btn" data-target="moreInfo1">... 접기</span></p> </div>
        </span>
    </div>

    <div id="bo_v_act"> 
        <span class="bbs_bn_box">
            <a href="#">
                <img src="<?php echo $board_skin_url ?>/img/copyright-regular.svg" alt="저작권">
                <img src="<?php echo $board_skin_url ?>/img/registered-regular.svg" alt="저작권">
                <img src="<?php echo $board_skin_url ?>/img/trademark-solid.svg" alt="저작권">
                <span class="font-B">주의사항.</span>
            </a>
        </span>
        <span class="bbs_bn_box">
            <p>본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다.
                <span class="expand-btn" data-target="moreInfo2">... 자세히보기</span></p>
            <div id="moreInfo2" class="more-content">
                <br>
                <p>또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.</p>
                <br>
                <p>본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. <span class="collapse-btn" data-target="moreInfo2">... 접기</span></p> </div>
        </span>
    </div>

02. view.skin.php

파일 맨 하단 아래 스크립트 추가

<script>
// 본문 하단 자세히보기. 접기 JavaScript 추가 (변경 없음)
document.addEventListener('DOMContentLoaded', function() {
    const expandButtons = document.querySelectorAll('.expand-btn');
    const collapseButtons = document.querySelectorAll('.collapse-btn');

    expandButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.dataset.target;
            const targetContent = document.getElementById(targetId);
            const correspondingCollapseBtn = targetContent.querySelector('.collapse-btn');

            targetContent.style.display = 'block';
            this.style.display = 'none';
            if (correspondingCollapseBtn) {
                correspondingCollapseBtn.style.display = 'inline';
            }
        });
    });

    collapseButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.dataset.target;
            const targetContent = document.getElementById(targetId);
            const correspondingExpandBtn = document.querySelector(`.expand-btn[data-target="${targetId}"]`);

            targetContent.style.display = 'none';
            this.style.display = 'none';
            if (correspondingExpandBtn) {
                correspondingExpandBtn.style.display = 'inline';
            }
        });
    });
});
</script>

03. style.css

/* 본문 하단 ... 자세히보기 ...접기 CSS 추가 */
.more-content {
    display: none; /* 초기에는 숨김 */
}

/* 자세히보기/접기 버튼 공통 스타일 */
.expand-btn,
.collapse-btn {
/* 기존 텍스트와 동일하게 (색상 및 굵기 제거) */
    color: inherit; /* 부모 요소의 글자 색상 상속 */
    cursor: pointer;
    text-decoration: none; /* 밑줄 유지 */
    margin-left: 5px;
    font-weight: normal; /* 굵기 제거 */
    display: inline; /* 글과 자연스럽게 이어지도록 inline으로 설정 */
}

/* 텍스트 버튼 호버 시 */
.expand-btn:hover,
.collapse-btn:hover {
    color: inherit; /* 호버 시에도 글자 색상 변화 없음 */
    text-decoration: none; /* 호버 시 밑줄 제거 (원하면 유지) */
}

/* 초기에는 접기 버튼 숨김 */
.collapse-btn {
    display: none;
}