Add collapse/expand buttons to lists of vehicles
// ==UserScript==
// @name Oryx lists expand/collapse buttons
// @namespace https://oryxspioenkop.com/
// @version 0.1
// @description Add collapse/expand buttons to lists of vehicles
// @author lifeAnime / Yhria
// @match https://www.oryxspioenkop.com/2022/02/attack-on-europe-documenting-equipment.html
// @match https://www.oryxspioenkop.com/2022/02/attack-on-europe-documenting-ukrainian.html
// @icon https://www.google.com/s2/favicons?sz=64&domain=oryxspioenkop.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
var styles =
/* Style the button that is used to open and close the collapsible content */
`
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
} `
+
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
`
.active, .collapsible:hover {
background-color: #ccc;
} `
+
/* Style the collapsible content. Note: hidden by default */
`
.ccontent {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
`
let button = `<button type="button" class="collapsible">Click here to expand list</button>`
let list = document.getElementsByTagName("article")[0].getElementsByTagName("ul")
let coll, i;
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
for (let element in list){
if (Number.isInteger(parseInt(element))){
list[element].className = "ccontent"
list[element].outerHTML = button + list[element].outerHTML
}
}
coll = document.getElementsByClassName("collapsible");
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
console.log(this)
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
})();