"Multiple choice spoiler" HTML

Question

I have a couple upcoming posts where I have multiple versions of the same poem all translated. I was thinking of giving two buttons to reveal each of them. I thought of implementing this as a double spoiler, but that would mean the poem could also be completely hidden (both spoilers closed) or be shown simultaneously in both versions (both spoilers open), whereas I would like to have one version and one only displayed at all times. Something like Edcel spreadsheets, where you have the buttons at the bottom to switch between sheets but cannot view multiple sheets simultaneously or not view any of the sheets. Can that be done in HTML? And if so, how?

Update

A now-deleted answer suggested Bootstrap Panels. I tried them out, but the following code:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">Vulgate version</div>
    <div class="panel-body">pefanthi</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Campbell version</div>
    <div class="panel-body">Abanthi</div>
  </div>
</div>
This is merely a test post to try out "Boostrap Panels". It is not meant to make any sense, but only to be able to click on buttons, which previews do not (or at least, spoilers and links don't work in previews, which is why I'm posting this).

produces this:

Is that the expected output, in which case this is not what I'm after, or is there something wrong with the code?

I cannot think of a website with this kind of thing implemented. What I want to achieve is to have a row of (in this case two) buttons at some point in the page (in this test post the point would be the top, in the actual blog posts it will be after a short introduction which is nothing more than a <div style="text-align: justify"> and a couple <br>s) which, when clicked on, will either change a part of the page below them, or, if I click the already active one, not change it. In particular, in the above code, I want two buttons, with "Vulgate version" on the leftmost one and "Cambpell version" on the other one, so that the former is automatically activated and shows "pefanthi", whereas the latter can be activated by clicking and that means "pefanthi" goes away and is replaced by "Abanthi", and then if I click on "Vulgate version" again I get pefanthi back and Abanthi leaves. Just like happens with tabs from a single window of a browser like Firefox:

So in this comparison, I want a "Vulgate version" tab that shows the "pefanthi" and a "Campbell version" which shows the "Abanthi", while the text about that being a test post stays below whatever is displayed, like that "It looks like you haven't started Firefox in a while […]" text in the picture, but with no X to make it disappear.

Update 2

Just figured out a way to do almost what I want. Here it is:

<button title="Vulgate version" type="button" onclick="if(document.getElementById('Vspoiler') .style.display=='none') {document.getElementById('Vspoiler') .style.display=''; document.getElementById('spoiler') .style.display='none'}">Vulgate version</button>
<button title="Campbell version" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''; document.getElementById('Vspoiler') .style.display='none'}">Campbell version</button>
<div id="Vspoiler" style="display:">pefanthi</div>
<div id="spoiler" style="display:none">Abanthi</div>

This way, if I click on a button and its content is shown, nothing happens, whereas if its content is not shown, it gets shown and the other button's content is hidden. The Vulgate version button has its content shown by default, so it is now impossible to have more or less than one button's contents shown.

There are two problems with this:

1. If the spoilers are more than two - and one of the posts I'm planning to use this on will have from 3 to 5 - the code gets pretty complex, so I'd like to know if there is a way to make the buttons hide the other buttons' contents when clicked without having to place a display:none for each of the other buttons: can the buttons "talk to each others" the way Firefox tabs to?
2. Having buttons that seem to do nothing is not good-looking IMO, so is there a way to make the button change look when it's pressed? For example, changing its color to the background color so it becomes almost invisible?

Update 3

Just found out how to change the color of a button:

style="background-color:<insert color>"

in the button tag. Implemented at this page, which is the rendered version of the above code. Now one question remains: how do I make each button change the other button's color, along with its own?

Update 4

This is exactly what I want. Except I tried adapting the code to my needs:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#vulg">Vulgate version</a></li>
  <li><a data-toggle="tab" href="#C">Campbell version</a></li>
</ul>

<div class="tab-content">
  <div id="vulg" class="tab-pane fade in active">
    <p>pefanthi.</p>
  </div>
  <div id="C" class="tab-pane fade">
    <p>Abanthi.</p>
  </div>
</div>

and the result is this, which is just not right. What am I doing wrong?

Update 5

Just tried copy-pasting the whole part over here, and the result can be seen here, and is not what the page says it should be, so is the page misguided or is there a problem of HTML versions that makes the code work on that page but not on my Blogger blog?

Update 6

Following @crapier' comment, I looked at "BS get started" (what an unfortunate initialism :) ), and found the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

I added it to my page, and something happened. The tabs appeared, but they do not work. What is going on? Should I add another one of the code lines here?

Update 7

Apparently it only works when all three of the lines here are added, but why?

Update 8

Moved the matter over to here, so this question merits a closure.