Как сделать текст, который будет появляться по нажатию на кнопку

Question

Помогите сделать кнопку, при нажатии которую будет появляться текст. HTML, JS

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Biograpy</title>

    <!-- Bootstrap reboot (для сброса стилей) -->
    <link rel="stylesheet" href="libs/bootstrap-reboot.min.css">

    <!-- Bootstrap сетка -->
    <link rel="stylesheet" href="libs/bootstrap-grid.min.css">

    <!-- Шрифты с Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

    <!-- Стили сайта -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <a href="#" class="navbar-brand">BIOGRAHPY</a>
            <div class="navbar-wrap">
                <ul class="navbar-menu">
                    <li><button type="submit" class="button" id="submit">О мне</button></li>
                    <div class="option">Тест</div>
                    <li><button type="submit" class="button" id="submit2">Портфолио</button></li>
                    <li><button type="submit" class="button" id="submit3">Место учебы</button></li>
                </ul>
                <a href="#" class="contacts">Контакты</a>
            </div>
        </div>
    </nav>
    
    <script type="text/javascript">
        $(".button").click(function() {
            $(".option").toggle("navbar-menu li button")
        }
    </script>
</body>
</html>

CSS

body {
    position: relative;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    min-width: 320px;
    overflow-x: hidden;
    height: auto;
}

/* Стили кнопок */
.navbar {
    width: 100%;
    height: 70px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
}
.navbar .container {
    height: inherit;
    display: flex;;
    justify-content: space-between;
    align-items: center;
}
.navbar-menu {
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.navbar-menu li {
    display: inline-block;
}
.navbar-menu li button {
    border-radius: 60px;
    border: none;
    outline: none;
    display: inline-block;
    color: #000;
    opacity: .6;
    text-decoration: none;
    padding: 10px;
    transition: all .7s ease-in-out;
}
.navbar-menu li button:hover {
    opacity: 1;
}
.option {
    display: none;
}
.navbar-wrap {
    display: flex;
    flex-flow: row nowrap;
}
.contacts {
    margin-left: 25px;
    padding: 10px 30px;
    background-color: lightcoral;
    border-radius: 90px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
    transition: all .7s ease-in;
}
.contacts:hover {
    box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
    transform: scale(1.050);
    color: #000;
}
.navbar-brand {
    font-weight: : 700;
    font-size: 26px;
    text-decoration: none;
    color: #000;
    transition: all .7s ease-out;
}
.navbar-brand:hover {
    color: lightcoral;
}

Answer 1

Пример использования метода toggle:

$(selector).toggle(speed,easing,callback)

Подробнее - https://www.w3schools.com/jquery/eff_toggle.asp и https://api.jquery.com/toggle/

БЛОГ НА HUSL

Как сделать текст, который будет появляться по нажатию на кнопку

Ответы (1 шт):