warning: this script has not been extensively tested
tbh i'm just posting it for my easy access.
ok so if you want to only have certain categories tabbed [as in, categories are the content of tabs, not that the categories have tabbing forums in themselves], this would work:
<div id="group-<!-- |cat_id| -->"> <div class="tabcat"><!-- |cat_name| --></div> // rest of category html/whatever you want to hide if tab not clicked. </div>
window.onload = () => {
let group = '#group-';
let tabn = '.tabcat';
let catn = '.category';
let ids = [2, 1]; // first number will be where the script groups everything under. controls basically where the group is placed. for example, if your boards are ordered: [cat-1, cat-3, cat-2], this set of ids will move everything associated inside cat-1 into cat-2, so it will look afterwards like (unsorted) -> [cat-3, (cat-2, cat-1)] / (sorted) -> [cat-3, (cat-1, cat-2)]
catgrpbyid(group, tabn, catn, ids);
// you can make multiple groupers by redefining ids and recalling the function. ie:
// ids = [3, 5, 6]; // first number will be where the script groups everything under
// catgrpbyid(group, tabn, catn, ids);
}
function catgrpbyid(group, tabn, catn, id) {
let a = document.querySelector(group+id[0]), a0 = id[0];
id.sort(); // this will sort everything inside the group. if you want your tabs in a specific order you should remove this line.
for(let i=0;i<id.length;i++){ //move tabs
let b = document.querySelector(group+id[i] + ' ' + tabn);
a.append(b);
}
for(let i=0;i<id.length;i++){ //move containers (in this case our categories)
let b = document.querySelector(group+id[i] + ' ' + catn);
a.append(b);
}
localT4({
outerName: group + a0,
tabClassName: tabn,
contClassName: catn,
toggle: '', carousel1: ''
});
}
make sure to also have included my tabbed script somewhere in your wrapper (put it at the top.)
<script src="https://codepen.io/breezescodes/pen/XWdymYM.js"></script>
