Кнопка «Предотвратить коллапс», чтобы свернуть все элементы из одного и того же ряда. - PullRequest
Новая
       5

Кнопка «Предотвратить коллапс», чтобы свернуть все элементы из одного и того же ряда.

0 голосов
/ 14 ноября 2018

У меня есть раздел часто задаваемых вопросов, и я спроектирован как два столбца с 3 делителями на одном столбце (я использую flex, но я говорю столбец, чтобы лучше понять)

Каждый div из двух столбцов действует как кнопка свертывания, чтобы показать ответ на вопрос под вопросом.

Я искал похожие вопросы, но, похоже, эта проблема не похожа.

Exemple:

Строка 1: вопрос A, вопрос B

Строка 2: вопрос C, вопрос D

Строка 3: вопрос E, вопрос F

Проблема: когда я нажимаю на вопрос A, весь ряд 1 свернулся, показывая ответ на вопрос A и оставляя пустое пространство под вопросом B.

Как я могу выдвинуть то, что находится под Вопросом A вместо того, чтобы свернуть строку 1?

Мой HTML: 

    <div id="questions-container">
        @foreach($questions as $question)
            <div class="question-container">
                <div data-toggle="collapse" data-target="#answerCollapse-{{$question->id}}" aria-expanded="false"
                     aria-controls="collapseExample">
                    {{$question->question}}
                </div>
                <div class="collapse" id="answerCollapse-{{$question->id}}">
                    <div class="card card-body">
                        {{$question->answer}}
                    </div>
                </div>
            </div>
        @endforeach
    </div>

CSS: 

#questions-container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.question-container {
    flex-basis: 45%;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #d5d1d1;
    border-radius: 5px;
}

.question-container:hover {
    background-color: #ffffff;
    -webkit-transition: 1s;
    cursor: pointer;
}
...