Задать вопрос
Liebherrssuport
@Liebherrssuport
Фрилансер, но начинающий.
bootstrap

Как сделать переход по ссылке и открытие блока через collapse в Bootstrap 5?

День добрый.
В Bootstrap 5 есть такой пример применения collapse в Bootstrap 5:
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Тут при нажатии на ссылку или кнопку открывается скрытый контент.
У меня цель. Первую ссылку надо убрать в меню сайта и при нажатии на неё происходил переход по этой же странице и открывался скрытый контент.
Подскажите как это сделать?
В ссылке заменил data-bs-toggle="collapse" на data-bs-toggle="collapsing". И в открывающемся блоке заменил class="collapse" на class="collapsing". Переход по ссылке стал выполняться, но блок не открывается. А я хочу что бы происходил переход и открывался блок. Помогите, может кто знаком с этим классом collapse???
  • Вопрос задан
  • 634 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
JohnnyGat
@JohnnyGat
Стараюсь писать код, понятный человеку.
Код:
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#collapseExample">collapseExample</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0
    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0
    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
    </div>

    <br><br> 1
    <br><br> 2
    <br><br> 3
    <br><br> 4
    <br><br> 5
    <br><br> 6
    <br><br> 7
    <br><br> 8
    <br><br> 9
    <br><br> 0

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <script>
        if (location.hash == '#collapseExample') {
            let bsCollapse = new bootstrap.Collapse(document.getElementById('collapseExample'));
            bsCollapse.show();
        }
    </script>
</body>

</html>
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Системный Аналитик 1С
Wanted. • Москва
До 260 000 ₽
Ведущий программист 1С
Автомакон
от 250 000 до 400 000 ₽
Системный аналитик
HR Prime
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн главной страницы в figma
23 нояб. 2024, в 22:03
3000 руб./за проект
Сделать дизайн сайта по примеру
23 нояб. 2024, в 21:53
30000 руб./за проект
Создать макет сайта в Figma
23 нояб. 2024, в 21:49
1000 руб./в час
Ещё заказы