Свернуть не работает в модальном режиме

В модальном я попытался добавить 3 текстовых поля подряд в виде сворачиваемых. Есть кнопка под названием добавить еще, если я нажму на эти 3 текстовых поля, они должны отобразиться во второй строке. Я пробовал использовать пример #collapse в модальном режиме, но он не работал. поток, учреждение и год прохождения должны быть свернуты при нажатии кнопки добавления.

  <!-- Modal -->
  <div class = "modal fade" id = "myModal" role = "dialog">
<div class = "modal-dialog">

  <!-- Modal content-->
  <div class = "modal-content">
    <div class = "modal-body">
      <div class = "panel panel-default">
        <div class = "panel-body">
          <button type = "button" class = "close" data-dismiss = "modal">
            <font color = "black">
              <a href = "hrtoolkit.html" style = "color: darkred">
                <span style = "color: darkred;">&times;</span>
              </a>
            </font>
          </button>
          <label class = " col-sm-4">Edit &nbsp;&nbsp; Save</label>
          <br />
          <div class = "container">
            <div class = "row">
              <div class = "col-md-6">
                <div class = "form-body">
                  <br />
                  <table class = "table table-responsive">
                    <tbody>
                      <tr>
                        <td class = "outside" style = "border-style: none; border-bottom-style: none; ">
                          <input type = "text" class = "form-control" placeholder = "10th" />
                        </td>
                </div>
              </div>
              <td class = "outside" style = "border-style: none; border-bottom-style: none;">
                <input type = "text" class = "form-control" placeholder = "Degree" /> </td>
              <td class = "outside" style = "border-style: none; border-bottom-style: none;">
                <button type = "button" class = "btn btn-default " data-toggle = "collapse" data-target = "#collapseExample" style = "font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
                </button>
                </tr>

                <div class = "collapse" id = "collapseExample">
                  <tr>
                    <td class = "outside" style = "border-style: none; border-bottom-style: none; ">Stream
                      <input type = "text" class = "form-control" placeholder = "Stream" />
                    </td>
                    <td class = "outside" style = "border-style: none; border-bottom-style: none;">Institution
                      <input type = "text" class = "form-control" placeholder = "Institution" />
                    </td>
                    <td class = "outside" style = "border-style: none; border-bottom-style: none;">Yr of Passing
                      <input type = "date" class = "form-control" id = "resizedTextbox" placeholder = "Yr of Passing"
                      />
                    </td>
                  </tr>
                </div>

                <tr>
                  <td class = "outside" style = "border-style: none; border-bottom-style: none; ">Stream
                    <input type = "text" class = "form-control" placeholder = "Stream" />
                  </td>
                  <td class = "outside" style = "border-style: none; border-bottom-style: none;">Institution
                    <input type = "text" class = "form-control" placeholder = "Institution" />
                  </td>

                  <td class = "outside" style = "border-style: none; border-bottom-style: none;">Yr of Passing
                    <input type = "date" class = "form-control" id = "resizedTextbox" placeholder = "Yr of Passing"
                    />
                  </td>

                </tr>

                <tr>
                  <td class = "outside" style = "border-style: none; border-bottom-style: none;">State
                    <input type = "text" class = "form-control" placeholder = "State" />
                  </td>
                  <td class = "outside" style = "border-style: none; border-bottom-style: none;">Country
                    <input type = "text" class = "form-control" placeholder = "Country" />
                  </td>
                  <td class = "outside" style = "border-style: none; border-bottom-style: none;">
                    <br>
                    <input type = "file" class = "custom-file-input">
                  </td>


                </tr>


                </tbody>
                </table>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

javascript jquery html

05.06.2018 09:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

173

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Он работает, см. Этот пример

https://codepen.io/creativedev/pen/YvqrbB

Проблема в том, что вы использовали тег div в таблице. Просто передайте класс коллапса class = "collapse" id = "collapseExample" в tr

<tr class = "collapse" id = "collapseExample">
   <td class = "outside" style = "border-style: none; border-bottom-style: none; ">Stream
    <input type = "text" class = "form-control" placeholder = "Stream" />
   </td>
   <td class = "outside" style = "border-style: none; border-bottom-style: none;">Institution
     <input type = "text" class = "form-control" placeholder = "Institution" />
   </td>
   <td class = "outside" style = "border-style: none; border-bottom-style: none;">Yr of Passing
    <input type = "date" class = "form-control" id = "resizedTextbox" placeholder = "Yr of Passing" />
   </td>
 </tr>

05.06.2018 09:18

Другие вопросы по теме

Скрыть или скрыть адресную ссылку при наведении курсора в Wordpress

Как определить предыдущий элемент при наведении курсора

Непрерывный эффект CSS при нажатии и наведении

Вызов Ajax возвращает полный HTML-код страницы вместо желаемых данных

AngularJS ng-repeat конфликтует с jquery

JQuery, как поместить значение хэша в параметр запроса GET

Междоменный AJAX получает ответ, но в сообщении об ошибке

Последний дочерний элемент <ul> не подчиняется стилю других дочерних элементов

Как рассчитать дату по разнице

.hide не работает с функцией щелчка

Свернуть не работает в модальном режиме

Ответы 1

Другие вопросы по теме

Похожие вопросы