JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0)" class="teacher-link">teachers</a><br/>
<a href="javascript:void(0)" class="admin-link">admin</a><br/>
<a href="javascript:void(0)" class="support-link">support</a>

<div id="active"></div>
<div id="disabled"></div>
<div id="type"></div>

<div class="teachers"><div class="staff-outer-container">teachers</div></div>
<div class="administrators"><div class="staff-outer-container">administrators</div></div>
<div class="support"><div class="staff-outer-container">support</div></div>

CSS

.active {
    border: 1px solid black;
}

.clickable {
    border: 1px solid blue;
}

JavaScript

var active=document.getElementById('active'),
    disabled=document.getElementById('disabled'),
    teacher = {
        $link: $('.teacher-link'),
        selector: '.teachers',
        text: 'Teachers'
    },admin = {
        $link: $('.admin-link'),
        selector: '.administrators',
        text: 'Administrators'
    },support = {
        $link: $('.support-link'),
        selector: '.support',
        text: 'Support Staff'
    };

bindHandler([teacher, admin, support]);

//bind handlers
function bindHandler(items) {
    for (var i in items) {
        items[i].$link.on('click', items[i], clickHandler);
    }
}

//generic handler
function clickHandler(event) {
    var context = event.data;
    if (active !== context.selector) {
        $(active).hide();
        active = context.selector;
        $(active).show();
        var $container = $(context.selector + ' .staff-outer-container');
        width = $container.children().size() * 180;
        $container.css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(context.text);
    }    
}