Как допилить табы через button group в bootstrap 4?

Question

[Heorhii]

Нужно сделать табы, но кнопочки и контент должны быть в разных блоках. Сделать хочу через button-group на бутстрапе 4, все написал но не работает.. Исходники приложил, подскажите как сообразить
Вот структура

<div class="btn-group btn-group-sm btn-group-toggle d-flex justify-content-center pt-2" data-toggle="buttons">
                  <label class="btn btn-outline-tablet active">
                    <input type="radio" name="options" id="option1" autocomplete="off" onclick="openCity('London')" checked> London'
                  </label>
                  <label class="btn btn-outline-tablet">
                    <input type="radio" name="options" id="option2" autocomplete="off" onclick="openCity('Paris')"> Paris
                  </label>
                  <label class="btn btn-outline-tablet">
                    <input type="radio" name="options" id="option3" autocomplete="off" onclick="openCity('Tokyo')"> Tokyo
                  </label>
                </div>
<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>ы
<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

и джс

function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    document.getElementById(cityName).style.display = "block"; 
}

Answer 1

[koanvl]

А почему реализация именно через радиобаттоны? Если чисто дизайнер так задумал, то проще сделать псевдо-радиобаттоны. В 4 буте есть готовые табы тыц. Навигация - отдельно, таб-контент - отдельно