Расширение OnClick один div с перестановкой остальных

Question

каждый!Так что я имею в виду, что у меня есть div div = контейнер с 2 рядами по 3 карты в нем.

Я использую загрузчик 4 в качестве сетки и макета.

Примеры карт: https://getbootstrap.com/docs/4.0/components/card/

<div class="container>
  <div class="row>
    <card-element />
    <card-element />
    <card-element />
    <card-element />
  </div>
</div>

По сути, эти 4 элемента снова являются divами с другими элементами div для них, чтобы распределить содержимое fx вверху с помощью a и для описания.

Функциональность, которую я пытаюсь достичь, заключается в том, что когда я нажимаю на любой из них, тот, на который я нажал, должен идти вперед и расширяться в середине, когда остальные перемещаются в левую или правую часть контейнера.Элемент и изменение размера до меньшего размера (как эскиз, но очень маленький).До сих пор я пытался использовать transform и translate для расширения, однако я не могу понять, как смешать и сопоставить две функциональные возможности.

Я думал о наличии пары функций JQuery на следующих этапах: 1.Onclick- Выбранный элемент расширяется, в то время как все остальные элементы .remove () от JQuery.2. Как только он расширяется, другие элементы добавляются с двух сторон - скажем, 2 деления внутри контейнера, расположенного слева и справа от него.Конечно, добавление выполняется точно в обе стороны div.3. Переход, который предположительно происходит, состоит в том, что другие эскизы элементов карты исчезают, исчезают и появляются после выполнения функции .append.

Любые идеи могут помочь или любая ссылка на проблему / задачу similairоказать большую помощь.

Answer 1

Вы можете использовать компонент Bootstrap Collapse и jQuery для переключения классов CSS.Например ...

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').not(this).collapse("hide");
  $(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
  $(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});

$('.collapse').on('hide.bs.collapse', function () {
  $(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
  $(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});

А затем добавить некоторые CSS-преобразования по мере изменения классов ...

.row > [class*="col"], img{
    transition: all .3s ease;
}

Демо: https://www.codeply.com/go/emFWdeJQgS

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

Answer 2

Вы можете использовать Jquery-UI , есть компонент, называемый гармошкой, он работает так:

$(function () {
    $("#accordion").accordion();
});

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Card 1</h3>
  <div>
    <p>
      Text of card 1...
    </p>
  </div>
  <h3>Card 2</h3>
  <div>
    <p>
      Text of card 2...
    </p>
  </div>
</div>