Why not all added items will open dropdown menu

1

The first added item will open the dropdown menu when user clicks on three bullits, The problem begins when you add more then one item to that list. Not all the dropdown meny will be shown in this case and it is right that only one dropdown will show each time (accordion).

        function toggleOptionButton() {
            var itemClass = this.nextElementSibling.className;
            console.log(itemClass);

            for(var i = 0; i < option.length; i++) {
                option[i].className = 'option closeOption'; 
            }
            if(itemClass === 'option closeOption') {
                this.nextElementSibling.className = 'option openOption';
                console.log(itemClass);
            }
        }

In order to give you a clear picture of the entire code —> https://codepen.io/chichichi/pen/rpYNqe?editors=0111

You should look between line 48 and 58.

3

Meny --? Menu. But if I add two or more items to this list. Not all dropdown menu will display…

4

So using a for-loop would be a better solution?

6

Found the answer after experimenting with some codes.

https://codepen.io/chichichi/pen/rpYNqe?editors=0111

I assign the element to the parent id and from there bubbling to the right event.target. Which in case bind one eventlistener each time when click event has been fired on the button.

8

Yes, thanks for helping me out. Learned some important thing about bubbling and disadvantage of using a forEach loop to bind click eventlisteners.