Using HTML markup instead of classes in a JavaScript drop-down menu

Question

Hello,

I got a piece of JavaScript from a training video, but I do not like how the HTML that associated with it is built. It's an accordion-style drop down menu, and it uses classes on each of the menu items that initiate the drop-down effect. I'll post my code and explain after...

<script type="text/javascript">
window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName('a');
    for (var i=0;i<allLinks.length;i++) {
        if (allLinks[i].className.indexOf('menuLink') > -1) {
            allLinks[i].onclick = toggleMenu;
        }
    }
}
function toggleMenu() {
    var startMenu = this.href.lastIndexOf('/')+1;
    var stopMenu = this.href.lastIndexOf('.');
    var thisMenuName = this.href.substring(startMenu,stopMenu);

    var thisMenu = document.getElementById(thisMenuName).style;
    if (thisMenu.display == 'block') {
        thisMenu.display = 'none';
    }
    else {
        thisMenu.display = 'block';
    }
    return false;
}</script>
<style type="text/css">
body {
    background-color: white;
    color: black;
}

div {
    padding-bottom: 10px;
    background-color: #6FF;
    width: 220px;
}

ul.menu {
    display: none;
    list-style-type: none;
    margin-top: 5px;
}

a.menuLink {
    font-size: 16px;
    font-weight: bold;
}

a {
    text-decoration: none;
}
</style>

<div id="nav">
    <ul>
        <li><a href="menu1.html" class="menuLink">Comedies</a>
            <ul class="menu" id="menu1">
                <li><a href="pg1.html">All's Well That Ends Well</a></li>
                <li><a href="pg2.html">As You Like It</a></li>
                <li><a href="pg3.html">Love's Labour's Lost</a></li>
                <li><a href="pg4.html">The Comedy of Errors</a></li>
            </ul>
        </li>
        <li><a href="menu2.html" class="menuLink">Tragedies</a>
            <ul class="menu" id="menu2">
                <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>
                <li><a href="pg6.html">Hamlet</a></li>
                <li><a href="pg7.html">Romeo &amp; Juliet</a></li>
            </ul>
        </li>
        <li><a href="menu3.html" class="menuLink">Histories</a>
            <ul class="menu" id="menu3">
                <li><a href="pg8.html">Henry IV, Part 1</a></li>
                <li><a href="pg9.html">Henry IV, Part 2</a></li>
            </ul>
        </li>
    </ul>
</div>

I would like the HTML to not use classes or IDs, and instead use pure HTML markup and work the same exact way. I'm no good enough at JavaScript to figure out how to do this, so I was hoping someone could modify this code to make it work the way I'd like it to. I would also like to keep , so it would be awesome if the script could run based on that ID so I can put other ul's on the page without them interfering with each other. Thank you!

Answer 1

This is "pure" HTML. Classes help define what styles and effects should be applied to the specific HTML element, and the IDs uniquely identify the HTML element on the page (or "in the document").

Without those you will lose the ability to (remotely easily) control what the menu looks like, or how it behaves (with Javascript) because the scripts and styles won't know what HTML elements they should act upon.

Does that make sense?

Classes and IDs are good things, and are actually the "best practice" way to do what you're trying to do - at least as well as I was able to understand your question.