CODEWITHSUNDEEP
javascripthtmlcssnavigation
Alireza Yosefi
Alireza Yosefi

Reputation: 33

open and close menus

I have 4 menus and with this piece of code, i can show menus and hide them with specific btns .my question is how can i when i open a menu and i don't close it and then I open another one close previous menus? i tried to store the open menu in a variable and check it when i open another one but it didn't work.

    <body>

    <div class="container">  ‌
        <div class="menu">
            <button class="btn">open</button>
            <div class="items">
                <div class="items-container">
                    <div class="item">item 1</div>
                    <div class="item">item 2</div>
                    <div class="item">item 3</div>
                    <div class="item">item 4</div>
                    <div class="item">item 6</div>
                </div>
            </div>
        </div>
        <div class="container">  ‌
            <div class="menu">
                <button class="btn">open</button>
                <div class="items">
                    <div class="items-container">
                        <div class="item">item 1</div>
                        <div class="item">item 2</div>
                        <div class="item">item 3</div>
                        <div class="item">item 4</div>
                        <div class="item">item 6</div>
                    </div>
                </div>
            </div>
            <div class="container">  ‌
                <div class="menu">
                    <button class="btn">open</button>
                    <div class="items">
                        <div class="items-container">
                            <div class="item">item 1</div>
                            <div class="item">item 2</div>
                            <div class="item">item 3</div>
                            <div class="item">item 4</div>
                            <div class="item">item 6</div>
                        </div>
                    </div>
                </div>
                <div class="container">  ‌
                    <div class="menu">
                        <button class="btn">open</button>
                        <div class="items">
                            <div class="items-container">
                                <div class="item">item 1</div>
                                <div class="item">item 2</div>
                                <div class="item">item 3</div>
                                <div class="item">item 4</div>
                                <div class="item">item 6</div>
                            </div>
                        </div>
                    </div>
    </div>


</body>

    const btns = document.querySelectorAll(".btn");
    btns.forEach(btn => {
    const menu = btn.parentElement;
    const items = menu.querySelector(".items");
    const itemsContainer = items.querySelector(".items-container");
    const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
    let previousActivebtn = "";

    btn.addEventListener("click", (e) => {
        // change btn text
        if (e.currentTarget.innerHTML == "open") {
            e.currentTarget.innerHTML = "close";
        } else {
            e.currentTarget.innerHTML = "open";
        }


        //show and hid the menus
        if (!items.classList.contains("item-active")) {
            items.classList.add("item-active");
            items.style.height = itemsContainerHeight + 32 + "px";
        } else {
            items.classList.remove("item-active");
            items.removeAttribute("style");

        }


    });
});

Upvotes: 2

Views: 842

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 77045

You overcomplicate it. You could create a CSS rule which would ensure that .items is hidden, unless .menu is opened:

.menu .items:not(.open) {
    display: none
}

And you could create a function like this:

function open(item) {
    if (!item.classList.contains("open")) {
        //Hide whatever was opened
        for (let it of document.querySelectorAll(.menu .items.open)) {
            it.classList.remove("open")
        }
        item.classList.add("open");
    } else {
        item.classList.remove("open");
    }
}

Just pass to this function the item having the class of items.

Upvotes: 2

Related Questions