Rozbaľovacie menu jQuery v jednoduchom javaskrite - javascript, jquery, prepínanie

Hľadám pomoc pri zmene navigačného menu jquery na obyčajný javascript. Čítal som veľa otázok o konverzii jquery na javascript, ale nedokážem sa oboznámiť so zmenami.

V podstate jQuery prepínajú triedy, takže rozbaľovacia ponuka zobrazuje a skrýva,

Tu je moja jQuery

$(document).ready(function() {

$(".three-lines-menu").on("click", function(e){

e.preventDefault();
$(".js-menu").toggleClass("js-menu-responsive");

});
});

Tu je miesto, kde som pri svojom obyčajnom javascripte

document.addEventListener("DOMContentLoaded", function(event) {

var menu = document.getElementByClassName("js-menu"),

toggleClass = function (el, cl) {
hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);

toggleClass(menu, "js-menu-responsive");

};
};

Toto je len môj pokus o prečítanie článkov, ale nemôžem ho uviesť do práce, akákoľvek rada alebo tlač správnym smerom by boli skvelé.

* Poznámka - Nepotrebujem podporu napr. 6,7,8

Tu je môj js fiddle

odpovede:

Nie som si istý, čo presne chcete, ale ak hľadáte rozbaľovaciu ponuku pomocou obyčajného javascriptu, skúste tento odkaz: jsfiddle / JavaScriptu Rozbaľovací

    var clk = document.getElementById("clk");
clk.onclick = function() {
var hid = document.getElementById("hidden");
if (hid.classList.contains("hide")) {
hid.classList.remove("hide");
hid.classList.add("show");
} else {
hid.classList.add("hide");
hid.classList.remove("show");
}
}

document.getElementById("under").onclick = function() {
document.getElementById("parent").innerHTML = "Undergraduate";
if (document.getElementById("hidden").classList.contains("hide")) {
document.getElementById("hidden").classList.remove("hide");
document.getElementById("hidden").classList.add("show");
} else {
document.getElementById("hidden").classList.add("hide");
document.getElementById("hidden").classList.remove("show");
}
}
document.getElementById("grad").onclick = function() {
document.getElementById("parent").innerHTML = "Graduate";
if (document.getElementById("hidden").classList.contains("hide")) {
document.getElementById("hidden").classList.remove("hide");
document.getElementById("hidden").classList.add("show");
} else {
document.getElementById("hidden").classList.add("hide");
document.getElementById("hidden").classList.remove("show");
}
}