Display Wikipedia pages clutter free using Tampermonkey - firefox

Question

At the end of wikipedia pages, there are reference links. I am trying to not display reference list, and list is toggled when clicked on heading of reference links, like 'Further Reading', 'Notes', 'References' etc. Every reference list has class name 'reflist'. Problem I am having is, when I try to find div with reflist class after heading,
if (div.className == 'reflist') statement does not work. What could be going wrong?
I wrote following code. Problem is when I click 'Further reading', 'reflist' of 'References' is toggled. Clicking 'References' also toggle the same 'relist'. By the way I am not Professional Programmer...
if (document.getElementsByClassName("reflist")) {
let x = document.getElementsByClassName("reflist");
for (let i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
function toggle(element) {
element.style.display = element.style.display == "none" ? "block" : "none";
}
// furtherReading is <span> element.
var furtherReading = document.getElementById("Further_reading");
// parentElement is <h2> element
furtherReading.parentElement.style.background = '#f8f9fa';
furtherReading.parentNode.style.borderBottom = 'none';
furtherReading.style.cursor = "pointer";
var references = document.getElementById("References");
references.parentElement.style.background = '#f8f9fa';
references.parentElement.style.borderBottom = 'none';
references.style.cursor = "pointer";
if (furtherReading) {
/* There may be other 'style' or 'div' elements before 'div' having className 'reflist' */
let a = furtherReading.parentElement.nextElementSibling;
while (a) {
if (a.className == 'reflist') {
break;
} else
a = a.nextElementSibling;
}
furtherReading.addEventListener("click", toggle.bind(null, a));
}
if (references) {
let b = references.parentElement.nextElementSibling;
while (b) {
if (b.className == 'reflist') {
break;
} else
b = b.nextElementSibling;
}
references.addEventListener("click", toggle.bind(null, b));
}

Answer 1

Try the following code, test with https://en.wikipedia.org/wiki/Perast
// ==UserScript==
// #name Toggle Wikipedia Reference
// #namespace http://tampermonkey.net/
// #version 0.1
// #description Toggle Wikipedia Reference
// #author Ynjxsjmh
// #match *://*.wikipedia.org/wiki/*
// #grant none
// ==/UserScript==
(function() {
'use strict';
var reflist = document.getElementsByClassName("reflist")[0];
var reference = document.getElementById("References");
console.log("Toggle Wikipedia Reference");
reflist.style.display = "none";
console.log(reference);
reference.addEventListener("click", toggleReference.bind(null, reflist));
function toggleReference(element) {
element.style.display = element.style.display == "none" ? "block" : "none";
}
})();
The problem is that you should get the div manually since nobody help you loop through the div.