아코디언 메뉴

01번이 열려있게 수정한 아코디언 메뉴

<div class="acco" >
                <button type="button" class="collapsible" onclick="collapse(this);"><span>01</span> Investment in SMEs Expanding into the U.S. Market</button>
                <div class="content">
                    <div class="tbox">
                        <p>We provide capital and strategic guidance to Korean SMEs entering the North American market, helping them navigate complexities and achieve
                            sustainable growth.
                        </p>
                    </div>
                </div>
                <button type="button" class="collapsible" onclick="collapse(this);"><span>02</span>  Discovery and Investment in Promising Startups</button>
                <div class="content">
                    <div class="tbox">
                        <p>We seek and invest in innovative startups with high growth potential, offering venture capital and support to help them scale and succeed.</p>
                    </div>
                </div>
                <button type="button" class="collapsible" onclick="collapse(this);"><span>03</span>  Venture Capital Investments</button>
                <div class="content">
                    <div class="tbox">
                        <p>Our venture capital investments nurture startups and emerging businesses through careful selection and due diligence, aiming for substantial growth and long-term success.</p>
                    </div>
                </div>
                <button type="button" class="collapsible" onclick="collapse(this);"><span>04</span>   U.S. Real Estate Investments</button>
                <div class="content">
                    <div class="tbox">
                        <p>We invest in high-potential real estate opportunities across the U.S., leveraging our expertise to identify and capitalize on profitable ventures.</p>
                    </div>
                </div>
            </div>

 

---

 

.acco{border-top: 4px solid #fff;}
.acco .collapsible { cursor: pointer; padding: 30px 35px; width: 100%; border: none; text-align: left; outline: none; font-size: 2.4rem; background: none; font-weight: bold; }
.acco .collapsible span{font-weight: 800; display: inline-block; min-width: 45px;}
.acco .active,
.acco .collapsible:hover {  }
.acco .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #e1e1e1; background: rgba(255,255,255,0.15);}
.acco .collapsible:after { content: '\002B';  font-weight: bold; float: right; margin-left: 5px; font-size: 2.0rem;}
.acco .active:after { content: "\2212"; }
.acco .content .tbox{padding: 30px 0px 30px 65px;}
.acco.content .tbox p{ font-size: 1.8rem; line-height: 145%;}

 

---

 

<script>
        function collapse(element) {
            var allButtons = document.getElementsByClassName("collapsible");  // 모든 버튼 가져오기

            // 다른 활성화된 버튼과 그 콘텐츠를 찾아서 모두 닫기
            for (var i = 0; i < allButtons.length; i++) {
                var content = allButtons[i].nextElementSibling;
                if (allButtons[i] !== element) {  // 클릭한 버튼 이외의 버튼들은 닫기
                    allButtons[i].classList.remove("active");  // 비활성화
                    if (content) {
                        content.style.maxHeight = null;  // 해당 콘텐츠 닫기
                    }
                }
            }

            // 현재 클릭된 버튼의 활성화 상태를 토글
            element.classList.toggle("active");

            var content = element.nextElementSibling;
            if (content) {  // 요소가 존재하는지 확인
                if (content.style.maxHeight) {  // 이미 열려 있으면 닫기
                    content.style.maxHeight = null;
                } else {  // 닫혀 있으면 열기
                    content.style.maxHeight = content.scrollHeight + "px";
                }
            }
        }

        // 페이지 로드 시 01번 섹션을 열어둠
        window.onload = function() {
            var firstButton = document.querySelector(".collapsible");  // 첫 번째 버튼 선택
            var firstContent = firstButton.nextElementSibling;  // 첫 번째 콘텐츠 선택

            firstButton.classList.add("active");  // 01번 버튼 활성화
            if (firstContent) {
                firstContent.style.maxHeight = firstContent.scrollHeight + "px";  // 01번 콘텐츠 펼치기
            }
        };

    </script>