I've created a toggle menu but this toggling only works for the first selected HTML element, How to fix this error? any reply would be helpful. Tnx :)

Question

full code is here : https://github.com/M-lakshan/toggle-menu-test.git

//common toggle part in the HTML(only the first div tag class "Qi" may differ...
//there are 5 of them(as Qi,Qii,Qiii,Qiv,Qv)

<main>
<!--***-->
    <div class="Qi">
        <div class="tab">
            <a id="anchor" class="active">
                How many team members can I invite?
                <img id="clickingArrow" class="active" src="./icon-arrow-down.svg" alt="click-arrow">
            </a>
            <div id="dropdown" class="active">
                <p class="text">
                    You can invite up to 2 additional users on the Free plan. There is no limit on 
                    team members for the Premium plan.
                </p>
            </div>
        </div>
    </div>
    <hr>
<!--***-->
</main>

//just JS

const arrowS = document.querySelectorAll("#clickingArrow");

arrowS.forEach(function(arrow) {
    arrow.addEventListener( "click", function(titlePop) {
        setTimeout ( () => {
            //for dropdown
            let text = document.getElementById("dropdown");
            text.classList.toggle("active");
        }, 500);
        //for anchor
        const container = titlePop.currentTarget.parentElement;
        container.classList.toggle("active");
        //for clickingArrow
        this.classList.toggle("active");
    });
});

This only works for the first toggle element in the HTML. full code(with HTML & CSS) is available in my provided Github link.

Hi! Welcome to StackOverflow. Generally, it is good to provide enough information to be able to [minimally recreate the problem](https://stackoverflow.com/help/minimal-reproducible-example). In your case, I recommend providing any related HTML and/or CSS. — Lae, Jun 14 '21 at 11:01
Error fixed :) >>> https://github.com/M-lakshan/toggle-menu-test.git >> folder: test - fixed code — Lakshan, Jul 30 '21 at 17:27

score 1 · Answer 1 · answered Jun 14 '21 at 11:03

1

Looking at your GitHub code, and the code in the question, it appears that you are using the same ID for multiple elements on the page. This would explain the issue you are experiencing as IDs should always be unique across a page. I would suggest instead using classes to be added to each id.

For example: <img class="clickingArrow active" src="./icon-arrow-down.svg" alt="click-arrow"> and the selector const arrowS = document.querySelectorAll(".clickingArrow"); should help in fixing this problem.

If it is imperative that you use IDs, then add a unique identifier to each, for example: <img id="clickingArrow_1" class="active" src="./icon-arrow-down.svg" alt="click-arrow"> and adjust your selctor accordingly.

answered Jun 14 '21 at 11:03

Bladeski

371
2
10

Hello Bladeski, thanks for replying. Actually, the "arrows" are working fine. They functioning separately. Only the "dropdown" div is working only for the first selection. Whatever arrow I clicked on, only the first div with id "#dropdown" will appear/function. Other divs are not working. I've tried my best to fix this as you said above but it is not the case. I Appreciate if you look back & get an idea how the current toggle menu works. – Lakshan Jun 16 '21 at 12:55
Hi @Lakshan - the arrows were just an example, but the principle applies to ALL elements on a page. There should never be a duplicate ID, so you will need to update or remove the IDs of 'arrows', 'dropdowns', 'anchors' etc. to remove duplicates and select them by something other than `getElementById`, which only ever selects one element. – Bladeski Jun 16 '21 at 14:03
I updated the whole project with classes as u said but then I get a console error. If I go with getElementByClassName, querySelectorAll, getElementByTagName this error appear. [ I even tried getElementByTagName("p") as a paragraph element but error comes again & again whatever I use other than getElemetById-with elements set as ids ] I've uploaded a screenshot regarding this error to my GIT repository. Check the root folder. Thanks again :) – Lakshan Jun 16 '21 at 15:53
>>> https://github.com/M-lakshan/toggle-menu-test/tree/M-lakshan-patch-1 << – Lakshan Jun 16 '21 at 15:56

I've created a toggle menu but this toggling only works for the first selected HTML element, How to fix this error? any reply would be helpful. Tnx :)

1 Answers1