javascript 이미지 아코디언

예쁘게 만들어봤다

    <div id="contain">
   // 문단
        <div class="page opening">
            <div class="title">
                <h2>01</h2>
                <h1>
                introduce
            </h1>
            </div>
            <div class="img">
                <img src="" />
            </div>
            <div class="text">
                <h1>pirate of king</h1>
                <h2>-</h2>
            </div>
        </div>
    // 문단
        <div class="page">
            <div class="title">
                <h2>02</h2>
                <h1>
                works
            </h1>
            </div>
            <div class="img">
                <img src="" />
            </div>
            <div class="text">
                <h1>Works</h1>
                <h2>-</h2>
            </div>
        </div>
     // 문단
        <div class="page">
            <div class="title">
                <h2>03</h2>
                <h1>
                history
            </h1>
            </div>
            <div class="img">
                <img src="" />
            </div>
            <div class="text">
                <h1>history</h1>
                <h2></h2>
            </div>
        </div>
   // 문단
        <div class="page">
            <div class="title">
                <h2>04</h2>
                <h1>
                contact
            </h1>
            </div>
            <div class="img">
                <img src="" />
            </div>
            <div class="text">
                <h1>contact</h1>
                <h2></h2>
            </div>
        </div>
    </div>

css

#contain .page .text{
    display:none;
}

#contain .page.opening .text{
    padding:0 0 0 5vw;
    height:100%;
    display: flex;
    justify-content: end;
    flex-direction: column;
}

css는 이런 식으로 하면 된다.

app.js

const pages = document.querySelectorAll('.page');
const images = document.querySelectorAll('.img');

pages.forEach(page => {
    page.addEventListener('click', () => {
        remove(pages);
        page.classList.add('opening');
    })
})

const remove = (page) => {
    pages.forEach(page => {
        page.classList.remove('opening')
    })
}