Edit in JSFiddle

function toggleDocs(event) {

    if (event.target && event.target.className == 'clickable-heading') {

        var next = event.target.nextElementSibling;


        if (next.style.display == "none") {
            next.style.display = "block";

        } else {
            next.style.display = "none";
        }
    }
}

document.addEventListener('click', toggleDocs, true);
<h2 class="clickable-heading">Toggle This Dropdown</h2>

<ul style="display:none">
    <li><a href="#">How To Do This</a>

    </li>
    <li><a href="#">Installing in The Mid 90s</a>

    </li>
</ul>

<h2 class="clickable-heading">Click This Dropdown 2</h2>

<ul style="display:none">
    <li><a href="#">Vote For Pedro</a>

    </li>
    <li><a href="#">Your Name is Napoleon?</a>

    </li>
</ul>
.clickable-heading {
    cursor:pointer;
}
.clickable-heading:hover {
    color:#515151;
}