Как реализовать развёртывание textarea при нажатии на bootstrap?

Для реализации развёртывания textarea при нажатии на кнопку в Bootstrap, можно воспользоваться всплывающими (dropdown) компонентами и JavaScript событиями.

В Bootstrap есть класс .dropdown, который позволяет создавать выпадающие списки или развернутые блоки. В нашем случае, мы будем использовать его для создания развернутой textarea.

Шаги реализации:

1. Добавьте необходимый HTML-код для создания textarea и кнопки "развернуть". Например:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="expandButton" data-toggle="dropdown">
    Развернуть
  </button>
  <div class="dropdown-menu" aria-labelledby="expandButton">
    <textarea id="expandedTextarea" class="form-control" rows="3"></textarea>
  </div>
</div>

2. Включите Bootstrap и подключите необходимые JavaScript-файлы. Убедитесь, что у вас имеется актуальная версия Bootstrap.

<!-- CSS стили Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- JavaScript файлы Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

3. Добавьте JavaScript-код для отслеживания события нажатия на кнопку "развернуть" и показа/скрытия textarea.

$(document).ready(function() {
  $('.dropdown-toggle').on('click', function() {
    var dropdownMenu = $(this).next('.dropdown-menu');
    dropdownMenu.toggleClass('show');
  });
});

В этом коде мы используем jQuery для отслеживания события клика на кнопку "развернуть" и определяем, что «dropdown-menu» следует показать или скрыть с помощью метода toggleClass().

Когда вы нажимаете на кнопку "развернуть", jQuery находит следующий элемент «dropdown-menu» с помощью метода next() и добавляет класс show, чтобы показать его. При повторном нажатии кнопки класс show удаляется и «dropdown-menu» будет скрыт.

В результате при нажатии на кнопку "развернуть" появится textarea с классом form-control. Вы можете настроить стили textarea по своему усмотрению.

Таким образом, вы реализуете развертывание textarea при нажатии на кнопку в Bootstrap, используя класс .dropdown, JavaScript-события и методы jQuery.