JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/style.css">
    <title>Ярослав Смайлов</title>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <header class="main-header">
                <a href="index.html" class="header-logo"><img src="../practice/img/logo.png" alt="Ярослав Смайлов"></a>

                <ul class="header-list">
                    <li class="header-item"><a href="#!" class="header-link">ГЛАВНАЯ</a></li>
                    <li class="header-item"><a href="#!" class="header-link">БЛОГ</a></li>
                    <li class="header-item"><a href="#!" class="header-link">КУРСЫ</a></li>
                    <li class="header-item"><a href="#!" class="header-link">КОНТАКТЫ</a></li>
                </ul>

                <div class="header-info">
                    <div class="header-feedback">
                        <a href="javascript:Spoiler();" class="link_spoiler" id="linkSpoiler">+38 (067) 329 88 38</a>

                        <div id="contentSpoiler" style="display: none;">
                        <p class="content-spoiler">+38 (067) 329 88 38</p>
                        <p class="content-spoiler">+38 (067) 329 88 38</p>
                        </div>
                    </div>

                    <a href="#!" class="header-search"><img style="height: 100%; width: 100%;" src="../practice/img/search-icon.png" alt=""></a>
                </div>
            </header>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

JavaScript

// Telephone accordeon
function Spoiler() {
    let ele = document.getElementById("contentSpoiler");
    let text = document.getElementById("linkSpoiler");
    if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "+38 (067) 329 88 38";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "+38 (067) 329 88 38";
    }
}