Need help toggling dropdown menus using the same class (Javascript)

Question

I'm trying to get this to work for all elements using the class-name '.sub-menu-parent', but I can only get it to work for the first instance of it.

I have tried using a for loop with the index of parentClass, but it doesn't seem to work. Same goes with the '.sub-menu-child' class.

HTML

        <nav>
            <div class="row">
                <img src="resources/img/logos/HTH_Logo_1_2.png" alt="A logo that says 'hearts that heal'" class="logo">
                <ul class="main-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#" class="sub-menu--parent">About Us <i class="ion-android-arrow-dropdown"></i></a>
                        <ul class="drop-down-main sub-menu--child">
                            <li><a href="#">Who We Are</a></li>
                            <li><a href="#">Mission Statement</a></li>
                            <li><a href="#">Vision Statement</a></li>
                            <li><a href="#">Our Values</a></li>
                            <li><a href="#">Goals</a></li>
                            <li><a href="#">Objectives</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="sub-menu--parent">Photo Gallery <i class="ion-android-arrow-dropdown"></i></a>
                        <ul class="drop-down-main sub-menu--child">
                            <li><a href="#">Group Photos</a></li>
                            <li><a href="#">Retreat Photos</a></li>
                            <li><a href="#">Members Photos</a></li>
                            <li><a href="#">Honorary Members Photos</a></li>
                            <li><a href="#">Our Beloved Children</a></li>
                            <li><a href="#">Activities and Sponsorship Photos</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>

                </ul>
            </div>
        </nav>

CSS

/* ----- MAIN NAV ----- */

.main-nav   {
    float: right;
    list-style-type: none;
    margin-top: 32.5px;
}

.main-nav li    {
    display: inline;
    text-align: center;

}

.main-nav li a:link, 
.main-nav li a:visited {
    text-decoration: none;
    color: #fff; 
    padding: 5px 10px;
    font-weight: 400;
    font-size: 80%;  
    background-color: #c95a6c;  /* #484066 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.main-nav li a:hover, 
.main-nav li a:active {
    background-color: #fff;
    color: #c95a6c;
}

/* ----- For colors ----- */

.main-nav-color:focus {
    color: #c95a6c !important; 
    background-color: #fff !important;  /* #484066 */
}


/* ----- NESTED NAV ----- */

.drop-down-main {
    position: absolute;
    z-index: 9990;
    background-color: #fff; 
    display: none;
    margin-top: 5px;
    border: 1px solid #484066;
    border-top: none;
}

.show {
    display: block;
}

.drop-down-main li  {
    display: block;
    text-align: left;
    border-bottom: 1px solid #484066;
    width: 100%;

}

.drop-down-main li a:link, 
.drop-down-main li a:visited {
    display: block;
    text-decoration: none;
    color: #c95a6c; 
    font-weight: 400;
    font-size: 80%;  
    background: none;  /* #484066 */
    border-radius: 0;
    padding: 5px 24px 5px 5px;
}

.drop-down-main li:hover, 
.drop-down-main li:active {
    background-color: #c95a6c;
}

.drop-down-main li a:hover, 
.drop-down-main li a:active {
    color: #fff;
}

.drop-down-main li:first-child {
    margin-top: 10px;
    border-top: 1px solid #484066;
}

.drop-down-main li:last-child {
    border: none;
}

Javascript

var menuToggle = (function() {
    var DOMstrings = {
        displayToggle: 'show',
        dropParent: '.sub-menu--parent',
        dropChild: '.sub-menu--child',
        colorToggle: 'main-nav-color',
    };

    var parentClass = document.querySelector(DOMstrings.dropParent);
    var childClass = document.querySelector(DOMstrings.dropChild);


    parentClass.addEventListener('click', toggleDropdown, false);

    function toggleDropdown() {
        childClass.classList.toggle(DOMstrings.displayToggle);
        parentClass.classList.toggle(DOMstrings.colorToggle);
    };

    window.addEventListener('click', function(event) {
        if(event.target !== parentClass && event.target.parentNode !== parentClass) {
            childClass.classList.remove(DOMstrings.displayToggle);
            parentClass.classList.remove(DOMstrings.colorToggle);
        }
    });   
})();

I have also tried using querySelectorAll but it seems you can't use classList Methods with it.

Answer 1

You should use querySelectorAll

Based from this answer: Add event listener to DOM elements based on class

document.querySelector('.class-name'); Will only select the first element having class='class-name' . For adding event listener to all such elements, use querySelectorAll()

And then update the code where you attach the listener.

var parentClasses = document.querySelectorAll(DOMstrings.dropParent);

for (var i = 0; i < parentClasses.length; i++) {
    parentClasses[i].addEventListener('click', setupEventListener(parentClasses[i]), false);
}

function setupEventListener(element){
    return function(){
        toggleDropdown(element);
    }
}

function toggleDropdown(element) {
    // since `ul` is a sibling of `a` 
    element.nextElementSibling.classList.toggle(DOMstrings.displayToggle);
    element.classList.toggle(DOMstrings.colorToggle);
};

I believe this should work for your current implementation, however this doesn't include code for toggling the display off.