Select next <div /> once you know the closest selector with javascript

I am developing a website and I can't use jQuery (no discussion about this), so pure javascript and a custom javascript framework is used.

Actually I have found a situation that I don't know how to handle:

I've a group of selectors, that for each one I add a "onclick" event to display / hide a div.

For example:

<div id="menu">
    开发者_JS百科<div class="menu-item">
        <div class="arrow">
            <a class="down">Open / Close</a>
        </div>

        Menu Item

        <div class="extramenu hidden">
            Extra menu items
        </div>
    </div>

    <div class="menu-item">
        <div class="arrow">
            <a class="up">Open / Close</a>
        </div>

        Menu Item 2

        <div class="extramenu">
            Extra menu items
        </div>
    </div>

    <div class="menu-item">
        <div class="arrow">
            <a class="down">Open / Close</a>
        </div>

        Menu Item 3

        <div class="extramenu hidden">
            Extra menu items
        </div>
    </div>
</div>

I select all "div.menu-item .arrow a" items, so I've 3 items. For each item I add a onclick event (that actually works fine).

What I need to archive is how to select the "closest" class .extramenu inside the div.menu-item. Then detect if the <a /> have a class .up or .down and if class == .up, add the class hidden; and if class == .down, remove the class hidden.

This a concept of what have to do, it's not javascript code:

var elements; // my list of elements

each(elements, function(element) {
    // here element is pointing to the ANCHOR
    add_event(element, "onclick", function(e) {
        var submenu; // here I need to detect the submenu closest to my anchor
        var state; // here I need to know if the anchor has class up or down

        if (state == "up")
        {
            add_class(submenu, "hidden"); // hide the submenu div
            remove_class(element, "up"); // remove the class up
            add_class(element, "down"); // and add the class down
        }
        else if (state == "down")
        {
            remove_class(submenu, "hidden"); // remove the class to show the menu
            remove_class(element, "down"); // remove the class down
            add_class(element, "up"); // and add the class up
        }
    });
});

Thank you guys and sorry if it's not well explained, I did my best!

element.querySelectorAll allows you to select elements by CSS selector.

element.classList allows you to access the classes of an element

add_event(element, "onclick", function(e) {
    var el = e.target, state;
    var parent = el.parentNode;
    while (!parent.classList.contains('menu-item')) {
        parent = parent.parentNode;
    }
    var submenu = parent.querySelector('extramenu');
        if (el.classList.contains('up')) {
        state = 'up';
    } else {
        state = 'down'
    }

    /* ... */
});

You can write the rest of the pseudo code yourself.

I'm assuming your already using Modernizr for supporting legacy browsers like IE8. If your not, then do so.

Maybe not exactly the way you want to do this but if class up or down would be added to parent of the a ie div.arrow you could do all of the hiding/showing with css combinator +. like this:

.arrow.down + .extramenu {
  /* the same styles as with hidden class */
}

This is the code you are looking for. Tested in FF5, should be cross-browser.

// use in your add_event function  
var submenu = element.parentNode.nextSibling;
while(submenu && (submenu.nodeName!="DIV" || submenu.className.indexOf("extramenu")==-1)) submenu = submenu.nextSibling;
var state = element.className;