The problem with tabbed interfaces is you can't see what you're going to get. You just see a boring tab with a stupid label. With stax, your "tab panes" are displayed like a stack of papers, giving the user a peek. Instead of clicking a tab, you click the content you want to view.

_aStack.html

<style>
    .stack{
        position: relative;
        /*        left: 50px;
                right: 50px;*/
        border: 5px beige outset;
    }
    .stackable{
        position: absolute;
    }

</style>
<div id="StackAttack" class="stack" style="position: relative">
    <div id="p1" class="stackable" style="z-index: 1">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">Card One</h5>
                        <p class="card-text">Between customers, Byford straightened a pile of free newsstackables. He had already introduced himself to the station agent, several platform cleaners, and the conductors on a couple of downtown trains. Each employee stared at the metal nametag pinned to his navy-blue suit. Yep, it was the president, the new guy. “Everything O.K.?” he asked. The employees seemed disarmed by his enthusiasm and his English accent. He shook hands and told people, “We’re one team.”</p>
                        <p class="card-text">Byford was new to the city—new to the country—and was still perturbed by things that most locals accepted as inevitable. “That brown tiling,” he said, pointing at a rust-streaked wall. He took a photograph with his phone. Down on the platform, Byford regarded the track bed. It looked, as nature intended, like hell: filthy water, strewn garbage. “My customers shouldn’t have to look at that,” he said. “We’ve ordered three vacuum cars. They’ll suck up all of this.”</p>
                        <p class="card-text">Byford, who is fifty-two, got his start in mass transit as a station foreman on the London Underground. The work ran in his family. His grandfather drove a bus for London Transport for forty years; his father worked there for twelve. Byford earned degrees in German and French, but after college he went to work for the Underground, learning car maintenance, operations, customer service, safety. He later worked on Britain’s main-line railways, and then ran mass transit in Sydney, Australia. His last stop before New York was Toronto, where, by nearly all accounts, he turned around a troubled transit system with spectacular results.</p>
                        <a href="#blone" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="p2" class="stackable" style="z-index: 2">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-success">
                    <div class="card-body">
                        <h5 class="card-title">Card Two</h5>
                        <p class="card-text">Toronto’s troubles, however, seem quaint compared with New York’s. With eight million passengers a day, the city has the largest public-transit system in North America, and, by every important metric—financial, operational, mechanical—it is in crisis. Some days, on a crosstown bus or a stalled train or a jam-packed platform, with your nose pressed into a stranger’s sweat-beaded neck and the appointed hour of your business lunch, your second date, your big job interview long past, it can feel like the system is in a death spiral. Train delays now occur roughly seventy thousand times a month, up from twenty-eight thousand in 2012. The system’s on-time rate, already among the nation’s worst, fell to fifty-eight per cent in January, down from ninety a decade ago. Bus ridership is in steep decline, caught in a negative-feedback loop with increasing car and truck traffic, slower buses, and less reliable service.</p>
                        <p class="card-text">This is where Byford comes in. “New York is really lucky to have Andy,” Mike Brown, the transport commissioner of London, told me. “If anybody can take on the combination of the complex politics and the service challenge, it’s Andy Byford.” That’s not a small “if.” The Metropolitan Transportation Authority, the agency that hired Byford, is a huge and much maligned organization. The New York City Transit Authority—the M.T.A.’s largest division, with fifty thousand employees—handles subways, buses, and paratransit. Other divisions oversee commuter-rail services, tunnels, and bridges.</p>
                        <a href="#blatwo" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="p3" class="stackable" style="z-index: 3">
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <h5 class="card-title">Card Three</h5>
                        <p class="card-text">Physically, Byford is not imposing. He has the build of a distance runner, stands five-nine, shaves his head. If there were a contest for the palest man in the five boroughs, he would be a contender. He has blue eyes, a prominent nose, a sprightly step—he often takes stairs two at a time. A public-transportation purist, he has never owned a car. He and his wife, Alison, met while working for the Tube, and he proposed to her on a high-speed train. She’s a bank systems analyst, from Ottawa, and their vacations, he says, are nearly always “busman’s holidays—in every city, I have to check out the mass transit.” In our rambles together by subway and bus through the arteries and capillaries of what he calls, with a straight face, New York City’s “quite fabulous system,” I never saw him sit down. “The seats are for customers,” he says. More often than not, he’d start conducting customer-satisfaction surveys with randomly selected travellers, listening to their tales of riderly woe.</p>
                        <p class="card-text">On the platform at Chambers Street, he studied a small group of workers, all in high-visibility orange vests, idling in a dim corner. “I wonder what they’re doing, or supposed to be doing,” he said. He decided against inquiring. “I’ve learned that it’s sometimes best not to just go steaming in.” But, when it comes to fixing the subways and buses, his approach will very much be to go steaming in. He wants to transform New York City’s mass transit—and had already committed himself to delivering a comprehensive plan within a hundred working days. “I don’t think they hired me to tweak things here and there,” he said. “This company needs a complete modernization.”</p>
                        <a href="#blathree" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="stax.js">

stax.js

/*
 * @author John Snook
 * @date Jul 2, 2018
 * @license https://snooky.biz/site/license
 * @copyright 2018 John Snook Consulting
 * The problem with tabbed interfaces is you can't see what you're going to get.
 * With stax, your "tab panes" are displayed in a stack, giving the user a peek.
 */

function stackEm() {
    var i = 1;
    var count = ($('div.stack div.stackable')).length;
    var containerWidth = $("#StackAttack").innerWidth();
    var gutterSize = 50;
    var itemWidth = containerWidth - (count * gutterSize) - gutterSize;

    $('div.stack div.stackable').each(function () {
        $(this)
                .off('click')
                .width(itemWidth)
                .css('z-index', i + 1)
                .css('left', gutterSize * i)
                .css('top', gutterSize * i)
                .fadeIn(200);

        $(this).on('click', function (event) {
            let topIndex = count - 1;
            if ($(this).index() < topIndex) {
                event.stopPropagation();

                $(this).fadeOut(200, function () {
                    $(this).insertAfter($('.stackable').eq(topIndex));
                    stackEm();
                });
                event.stopPropagation();
            }
        });
        i++;
    });
}

stackEm();

$(window).on('resize', function () {
    stackEm();
});