<link rel="stylesheet" type="text/css" href="./coin_item.css">

<section class="CoinItem">
    <div class="Coin_Menu" id="coin-item">
        <iframe src="coin_item_list.php" id="holding_frame" width="100%" style="border:none; overflow:hidden;" scrolling="no" onload="resizeIframe(this)"></iframe>
    </div>
    <div class="Coin_Button">
        <button class="CoinItem-toggle" id="CoinItemToggle"><label class="i">&#8645;</label> <label>보유종목</label></button>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    const content = $('#coin-item');
    const storageKey = 'coin_status';

    // 3. 이전 상태 유지 (localStorage 확인)
    if (localStorage.getItem(storageKey) === 'open') {
        content.show();
    }

    // 2. 버튼 클릭 시 슬라이딩 토글
    $('#CoinItemToggle').on('click', function() {
        content.slideToggle(300, function() {
            // 상태 저장
            if (content.is(':visible')) {
                localStorage.setItem(storageKey, 'open');
            } else {
                localStorage.setItem(storageKey, 'closed');
            }
        });
    });
});

// 아이프레임 높이 자동 조절 함수
function resizeIframe(obj) {
    // 내부 문서의 실제 높이를 가져와서 아이프레임 높이에 대입
    const innerBody = obj.contentWindow.document.body;
    obj.style.height = innerBody.scrollHeight + 'px';

    // 실시간 변화 감지 (데이터 갱신으로 높이가 변할 때 대응)
    if (!obj.observer) {
        obj.observer = new ResizeObserver(() => {
            obj.style.height = innerBody.scrollHeight + 'px';
        });
        obj.observer.observe(innerBody);
    }
}
</script>