Tabbed Categories

· 7 months ago

Noce

I modified the original forum category tab script slightly so it works better for my setup.

Changes I made:
• Added an "All Boards" button so you can show every category again
• Centred the tab buttons
• Added active tab highlighting
• Cleaned up some of the JavaScript
• Improved button spacing and layout

Feel free to use or modify it.

<style>
#cat-tabs{
    margin: 1.5rem 0;
    text-align:center;
}

#cat-tabs button{
    margin:4px;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
}

#cat-tabs button.active{
    background:#0d6efd;
    color:#fff;
}
</style>

<script>
const forumList = document.querySelector('div.forumlist');

if (forumList) {
    forumList.insertAdjacentHTML('beforebegin','<div id="cat-tabs"></div>');
}

const categories = document.querySelectorAll('div[id^="fourm-"]');
const titles = document.querySelectorAll('div.category h2 a');
const tabsContainer = document.querySelector('#cat-tabs');

/* Create ALL button */
const allBtn = document.createElement('button');
allBtn.textContent = "All Boards";
allBtn.className = "btn btn-primary btn-sm active";
tabsContainer.appendChild(allBtn);

/* Show all boards when clicked */
allBtn.onclick = function(){

categories.forEach(cat => {
    cat.style.display = "block";
});

document.querySelectorAll('#cat-tabs button').forEach(b => b.classList.remove("active"));
this.classList.add("active");
};

/* Create buttons for each category */
titles.forEach(title => {

const forumID = title.closest('div[id^="fourm-"]').id.replace('fourm-','');

const btn = document.createElement('button');
btn.textContent = title.textContent;
btn.className = "btn btn-secondary btn-sm";
btn.id = "tab-" + forumID;

tabsContainer.appendChild(btn);

btn.onclick = function(){

    categories.forEach(cat => {
        cat.style.display = "none";
    });

    document.querySelector('#fourm-' + forumID).style.display = "block";

    document.querySelectorAll('#cat-tabs button').forEach(b => b.classList.remove("active"));
    this.classList.add("active");

};

});
</script>

OP · 7 months ago

Nice job, empire! It looks a lot better than my version!

· 7 months ago

This is awesome! Is there a way to make the boards themselves tabbed rather than the categories? If so, how would I go about doing that? Would it be just a simple tweak of this code?

· 7 months ago

Korok said:
This is awesome! Is there a way to make the boards themselves tabbed rather than the categories? If so, how would I go about doing that? Would it be just a simple tweak of this code?

Yes, if you want the individual boards/forums to become tabs instead of the category blocks, it is basically the same idea, but you need to target the board elements rather than the category wrappers.

Instead of this:

const categories = document.querySelectorAll('div[id^="fourm-"]');
const titles = document.querySelectorAll('div.category h2 a');

you’d do something more like:

const boards = document.querySelectorAll('.YOUR-BOARD-SELECTOR');
const tabsContainer = document.querySelector('#cat-tabs');

Here is a clean example. You will need to swap .board-item and .board-title for the actual selectors on your page.

<style>
#board-tabs{
    margin: 1.5rem 0;
    text-align: center;
}

#board-tabs button{
    margin: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f5f5f5;
}

#board-tabs button.active{
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
</style>

<script>
const forumList = document.querySelector('div.forumlist');

if (forumList) {
    forumList.insertAdjacentHTML('beforebegin', '<div id="board-tabs"></div>');
}

const tabsContainer = document.querySelector('#board-tabs');

/* CHANGE THESE SELECTORS TO MATCH YOUR ACTUAL BOARD ELEMENTS */
const boards = document.querySelectorAll('.board-item');

if (tabsContainer && boards.length) {

/* All Boards button */
const allBtn = document.createElement('button');
allBtn.textContent = "All Boards";
allBtn.className = "active";
tabsContainer.appendChild(allBtn);

allBtn.onclick = function () {
    boards.forEach(board => {
        board.style.display = "";
    });

    document.querySelectorAll('#board-tabs button').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
};

boards.forEach((board, index) => {
    const titleEl = board.querySelector('.board-title');
    if (!titleEl) return;

    const boardID = 'board-tab-' + index;
    const btn = document.createElement('button');
    btn.textContent = titleEl.textContent.trim();
    btn.id = boardID;

    tabsContainer.appendChild(btn);

    btn.onclick = function () {
        boards.forEach(b => {
            b.style.display = "none";
        });

        board.style.display = "";

        document.querySelectorAll('#board-tabs button').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
    };
});
}
</script>

· 7 months ago

@empire That's awesome! Thank you for the instructions!