Tabbed Categories

Preview

This code allows you to tab through categories to show an individual category on button click, or clicking the Show All button will show all categories. The choice you make is saved via localStorage, meaning if you click “Cat #1” the “Cat #1” category will only show when you refresh the page.

Admin CP → Themes → Board Templates → Below the board

<script>
const headerLinks = document.querySelectorAll('.forumlist section header a');
const tabbedDIV = document.createElement('div');
tabbedDIV.className = 'tabbed-categories';
tabbedDIV.innerHTML = `<button type="button" class="btn btn-small show-all-cat" style="text-transform: none">Show All</button>`;
document.querySelector('.forumlist').prepend(tabbedDIV);

headerLinks.forEach((el) => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'btn btn-small show-forum';
    button.style.textTransform = 'none';
    button.innerText = el.innerText;
    document.querySelector('.tabbed-categories').append(button);
});

document.querySelector('.show-all-cat').addEventListener('click', (event) => {
    localStorage.removeItem('show-forum');
    const cats = document.querySelectorAll('.forumlist section');

    cats.forEach((el) => {
        el.style.display = 'block';
    });

    const buttons = document.querySelectorAll('.show-forum');

    buttons.forEach((el) => {
        el.classList.remove('btn-primary');
        el.classList.add('btn-small');
    });

    event.currentTarget.classList.remove('btn-small');
    event.currentTarget.classList.add('btn-primary');
});

const sForum = document.querySelectorAll('.show-forum');

sForum.forEach((el) => {
    el.addEventListener('click', () => {
        const title = el.innerText;
        const cats = document.querySelectorAll('.forumlist section');

        cats.forEach((rel) => {
            rel.style.display = 'none';

            if (title === rel.querySelector('header a').innerText) {
                rel.style.display = 'block';
                localStorage.setItem('show-forum', rel.id);
            }
        });

        const buttons = document.querySelectorAll('.show-forum');

        buttons.forEach((el) => {
            el.classList.remove('btn-primary');
            el.classList.add('btn-small');
        });

        document.querySelector('.show-all-cat').classList.remove('btn-primary');
        document.querySelector('.show-all-cat').classList.add('btn-small');
        el.classList.remove('btn-small');
        el.classList.add('btn-primary');
    });

    if (localStorage.getItem('show-forum')) {
        const catID = localStorage.getItem('show-forum');
        const cats = document.querySelectorAll('.forumlist section');

        cats.forEach((el) => {
            el.style.display = 'none';
        });

        document.querySelector('#' + catID).style.display = 'block';
        const title = document.querySelector('#' + catID + ' header a').innerText;
        const sForum = document.querySelectorAll('.show-forum');

        sForum.forEach((el) => {
            if (title === el.innerText) {
                el.classList.remove('btn-small');
                el.classList.add('btn-primary');
            }
        });
    }
});
</script>