Раскрытие обеспечивает сам браузер. Bootstrap отвечает за отступы и рамку; плагины и JavaScript не нужны.

Готовые классы: details / summary + border rounded p-3.

Как выглядит блок

Проверьте себя

Вам пришло письмо: «Срочно подтвердите пароль по ссылке, иначе доступ будет закрыт». Как поступить?

Показать разбор

Не вводить пароль по ссылке из письма. Открыть сервис привычным способом и уточнить запрос через известный канал поддержки. Срочность и просьба сообщить секрет — поводы остановиться.

Показать HTML для копирования

Выделите код, скопируйте и вставьте в режиме исходного кода редактора Moodle. Открытие блока не отправляет ответы.

<!-- Раскрывающийся ответ. Фрагмент для HTML-режима редактора Moodle. -->
<div class="mb-4">
  <h3 class="h5">Проверьте себя</h3>
  <p>Вам пришло письмо: «Срочно подтвердите пароль по ссылке, иначе доступ будет закрыт». Как поступить?</p>
  <details class="border rounded p-3">
    <summary class="fw-semibold">Показать разбор</summary>
    <div class="pt-3"><p class="mb-0">Не вводить пароль по ссылке из письма. Открыть сервис привычным способом и уточнить запрос через известный канал поддержки. Срочность и просьба сообщить секрет — поводы остановиться.</p></div>
  </details>
</div>

Что можно менять

Заменяйте учебный текст своим, сохраняя теги и классы. Заголовки подстройте под структуру своего урока. Цвета берутся из темы вашего Moodle.

Проверка: откройте ответ мышью, затем клавишами Tab и Enter. Это нативный HTML-блок, не компонент Bootstrap Collapse. Если ваш редактор убирает details, покажите разбор обычным текстом.

← В мастерскую · Как вставить HTML · Скачать все шаблоны ZIP