Popup 과 Accordion의 동작

팝업 나오고서 내부에 여러 아코디언 목차가 있는형태.

 

추가 및 보완 해야 할 사항은 ...

1. 현 팝업 종요 후 다시 팝업 클릭시 아코디언 정보 리셋

2. 팝업 내 클릭된 아코디언이 아닌 다른 아코디언 클릭시 축소 (1개의 아코디언만 동작하게-)

methods: {
    popupScript: function () {
        document.addEventListener('DOMContentLoaded', function () {
            var openButtons = document.querySelectorAll('.open_button');
            var closeButtons = document.querySelectorAll('.close_button');
            var dimOverlay = document.querySelector('.dim-overlay');

            // 팝업을 열 때마다 아코디언 여부를 체크하고 초기화
            openButtons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var popupId = btn.getAttribute('data-popup');
                    var popup = document.querySelector('#' + popupId);

                    if (popup) {
                        popup.style.display = 'block';
                        dimOverlay.style.display = 'block'; // 딤 처리도 보이도록 설정

                        // 팝업에 아코디언이 있는지 확인
                        var items = popup.querySelectorAll('.item');
                        if (items.length > 0) {
                            // 아코디언이 있으면 초기화
                            var details = popup.querySelectorAll('.item_detail');
                            var arrows = popup.querySelectorAll('.arrow svg');
                            details.forEach(function (detail) {
                                detail.style.display = 'none';
                            });
                            arrows.forEach(function (arrow) {
                                arrow.style.transform = 'rotate(0deg)';
                            });
                        }
                    }
                });
            });

            // 팝업 닫을 때도 모든 아코디언을 리셋
            closeButtons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var popup = btn.closest('.popup_dmall');

                    if (popup) {
                        popup.style.display = 'none';
                        dimOverlay.style.display = 'none'; // 딤 처리도 숨김

                        // 팝업에 아코디언이 있는지 확인하고 리셋
                        var items = popup.querySelectorAll('.item');
                        if (items.length > 0) {
                            var details = popup.querySelectorAll('.item_detail');
                            var arrows = popup.querySelectorAll('.arrow svg');
                            details.forEach(function (detail) {
                                detail.style.display = 'none';
                            });
                            arrows.forEach(function (arrow) {
                                arrow.style.transform = 'rotate(0deg)';
                            });
                        }
                    }
                });
            });
        });
    },
    accordion: function () {
        var items = document.querySelectorAll('.popup_dmall .item'); // 팝업 내의 아코디언 항목들
        items.forEach(function (item) {
            item.addEventListener('click', function () {
                var detail = this.nextElementSibling;
                var arrow = this.querySelector('.arrow svg');

                // Ensure that detail and arrow elements exist before accessing their properties
                if (detail && arrow) {
                    // 이미 열려있는 경우 (즉, 클릭한 아코디언이 이미 열려 있다면) 닫음
                    if (detail.style.display === 'block') {
                        detail.style.display = 'none';
                        arrow.style.transform = 'rotate(0deg)';
                    } else {
                        // 현재 열려 있는 팝업 내에서 다른 아코디언 닫기
                        var currentPopup = this.closest('.popup_dmall');
                        var otherItems = currentPopup.querySelectorAll('.item');
                        otherItems.forEach(function (otherItem) {
                            var otherDetail = otherItem.nextElementSibling;
                            var otherArrow = otherItem.querySelector('.arrow svg');

                            if (otherDetail && otherDetail.style.display === 'block') {
                                otherDetail.style.display = 'none';
                                if (otherArrow) {
                                    otherArrow.style.transform = 'rotate(0deg)';
                                }
                            }
                        });

                        // 현재 클릭된 아코디언 열기
                        detail.style.display = 'block';
                        arrow.style.transform = 'rotate(180deg)';
                    }
                }
            });
        });
    }
}