Как сделать навигацию с исчезновением и появлением элементов?

Question

[atumbochka]

Есть кнопки и дивы (.formAndText, .text2, .text3):

<div class="container">
        <div class="header">
            <div class="header__logo">
                <h2>Пунктуальный Пациент</h2>
            </div>
            <div class="header__nav">
                <button class="btn" id="button1">Очередь</button>
                <button class="btn" id="button2">О нас</button>
                <button class="btn" id="button3">Оставить отзыв</button>
            </div>
        </div>
    
        <div class="formAndText">
            <div class="textContainer">
                <h2 class="aboutTurn">Если вы хотите записаться на приём к врачу, то вы можете встать в электронную очередь. В ней вам достаточно указать ФИО, дату рождения и ваши симптомы, после чего вы узнаете, сколько вам нужно подождать, чтобы прийти в больницу!</h2>
            </div>
            <form id="formContainer">
                <h2 class="mainText">Заполните анкету:</h2>
                <div class="pd">
                    <input type="text" placeholder="ФИО" id="name">
                </div>
                <input type="text" placeholder="Число" id="dayOfBirth">
                <div class="pd">
                    <select name="select" id="monthOfBirth">
                        <option>Январь</option>
                        <option>Февраль</option>
                        <option>Март</option>
                        <option>Апрель</option>
                        <option>Май</option>
                        <option>Июнь</option>
                        <option>Июль</option>
                        <option>Август</option>
                        <option>Сентябрь</option>
                        <option>Октябрь</option>
                        <option>Ноябрь</option>
                        <option>Декабрь</option>
                    </select>
                </div>
                <input type="text" placeholder="Год" id="yearOfBirth"> 
                <br>
                <h2 class="symptomsText">Симптомы:</h2>
                <select name="select" id="symptoms">
                    <option>Экстримальные</option>
                    <option>Сложные</option>
                    <option>Средние</option>
                    <option>Лёгкие</option>
                </select>
                <div class="pdTop">
                    <input type="button" id="submitButton" value="ОК">
                </div>
                <h2 id="countDown"></h2>
                <h2 id="yourTurn">Ваша очередь подошла!</h2>
            </form>
        </div>
        <div class="text2">abc</div>
        <div class="text3">abc</div>
    </div

Нужно сделать так, чтобы при нажатии #button1 появлялся .formAndText, на #button2 - .text2, #button3 - .text3. И при этом нужно, чтобы при нажатии, например, на #button1 исчезали .text2 и .text3. Проще говоря, кнопки с переключением.
Пример - https://html5css.ru/howto/howto_js_tabs.php

Никак не получается. Заранее спасибо.

Вот js и css, если понадобится:

let name = document.getElementById("name");
let dayOfBirth = document.getElementById("dayOfBirth");
let monthOfBirth = document.getElementById("monthOfBirth");
let yearOfBirth = document.getElementById("yearOfBirth");
let submitButton = document.getElementById("submitButton");

let usersArray = [];
let userInformation = {};

let symptoms = document.getElementById("symptoms");

let boolTimer = false;

let yourTurn = document.getElementById("yourTurn");
yourTurn.hidden = true;

submitButton.onclick = function () {
    userInformation = {
        "name": name.value,
        birth: dayOfBirth.value + " " + monthOfBirth.value + " " + yearOfBirth.value,
        "symptoms": "Симптомы: " + symptoms.value
    };
    
    if (symptoms.value === "Экстримальные") {
        var symptomTime = 100;
    }
    else if (symptoms.value === "Сложные") {
        var symptomTime = 60;
    }
    else if (symptoms.value === "Средние") {
        var symptomTime = 30;
    } else {
        var symptomTime = 15;
    }

    let startingMinutes = symptomTime;

    let time = startingMinutes * 60;

    let countDown = document.getElementById("countDown");

    if (boolTimer == false) {
        setInterval (updateCountDown, 1000);

        function updateCountDown () {
            var minutes = Math.floor(time / 60);
            var seconds = time % 60;

            seconds = seconds < 10 ? "0" + seconds : seconds;

            countDown.innerHTML = `${minutes}:${seconds}`;
            time--;

            if ((countDown.innerHTML == "0:00") || (minutes == 0 && seconds == "0" + 0)) {
                yourTurn.hidden = false;
                countDown.hidden = true;
            }
        }

        if (time > 0) {
            boolTimer = true;
        } else {
        return;
        }
    }
};

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
}

.container {
width: 100%;
height: 100%;
max-width: 960px;
margin: 0 auto;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;

padding: 25px 0 40px 0;
}

.header__logo {
text-transform: uppercase;
}

.header__nav {
display: flex;
text-transform: uppercase;
}

.btn {
background: none;
border: none;
outline: none;
line-height: 1;

cursor: pointer;

text-transform: uppercase;
}

#button2 {
padding: 0 15px;
}

.btn:after {
display: block;
left: 0;
width: 0;
height: 2px;
background-color: #00a650;
content: "";
transition: width 0.3s ease-out;
}

.btn:hover:after,
.btn:focus:after {
width: 100%;
}

.aboutTurn {
font-weight: 500;
font-size: 20px;
padding-bottom: 25px;
}

#formContainer {
width: 400px;
padding: 40px;
position: relative;

margin: 0 auto;
padding-bottom: 10px;

background-color: lightskyblue;

text-align: center;

border-radius: 10px;
}

.mainText {
text-align: center;
text-transform: uppercase;
}

#name, #dayOfBirth, #monthOfBirth, #yearOfBirth, #symptoms {
border: 0;
background: 0;
display: block;
text-align: center;
margin: 0 auto;

border: 2px solid black;
padding: 14px 10px;
border-radius: 24px;
outline: none;

width: 200px;
transition: 0.25s;
}

#name:focus, #dayOfBirth:focus, #monthOfBirth:focus, #yearOfBirth:focus, #symptoms:focus {
width: 280px;
border-color: green;
}

.pd {
padding: 10px 0;
}

select {
width: 100px;

cursor: pointer;
}

.pdTop {
padding-top: 10px;
margin: 0 auto;
}

.symptomsText {
padding-bottom: 10px;
}

#submitButton {
width: 100px;

cursor: pointer;

border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid green;
padding: 10px 40px;
outline: none;
border-radius: 24px;

transition: color .4s linear;
}

#submitButton:hover {
background-color: green;
}