Для того чтобы сделать переход по ссылке и открытие блока через collapse в Bootstrap 5, вам потребуется использовать некоторые особенности этой версии фреймворка. В самом начале, убедитесь что у вас подключены необходимые файлы Bootstrap, такие как CSS-файлы и JS-файлы.
Далее, создайте HTML-разметку, которая будет содержать вашу ссылку и блок, который будет открываться по ссылке.
<a href="#block" class="btn btn-primary" data-bs-toggle="collapse">Открыть блок</a> <div id="block" class="collapse"> Содержимое блока </div>
Обратите внимание на добавленные классы btn и btn-primary для стилизации ссылки в виде кнопки. Также, добавлен атрибут data-bs-toggle="collapse", который указывает, что элемент будет использоваться для открытия и закрытия блока collapse.
Затем, в JS-файле или встроенном скрипте, вы должны инициализировать collapse-компонент Bootstrap, чтобы он работал с вашими элементами:
var myCollapse = new bootstrap.Collapse(document.getElementById('block'));
Это позволяет Bootstrap использовать ваше HTML-разметку для открытия и закрытия блока collapse.
Теперь, при клике на ссылку, блок будет открываться и закрываться. У вас также есть возможность добавить анимацию или другие настройки через использование дополнительных параметров и классов опций collapse-компонента Bootstrap.
Если вы хотите, чтобы блок открылся сразу при загрузке страницы, вам нужно добавить класс show к HTML-разметке блока collapse:
<div id="block" class="collapse show"> Содержимое блока </div>
Это позволит блоку быть открытым по умолчанию.
Вот и весь процесс. Теперь у вас есть функционал, который позволяет сделать переход по ссылке и открывать блок collapse в Bootstrap 5. Вы можете настраивать его дальше, добавлять стили и анимации по вашему вкусу.