Как реализовать переключение вида карточек?

Question

[Вадим]

Как реализовать вот такое переключение внешнего вида карточек?
https://jsfiddle.net/himodoricode/6od47bkt/

Comments

[Lord_Dantes]

Какое переключение?

Answer 1

[0xD34F]

Так что надо-то - задавать карточкам различные стили (а это и есть "переключение вида"), или переключаться между разными наборами карточек (которые вы показали в песочнице)?

Первое.

<div class="wrapper">
  <button data-view="horizontal">Горизонтально</button>
  <button data-view="vertical">Вертикально</button>
  <div class="card-wrapper" data-view="horizontal">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

.card-wrapper {
  display: flex;
}
.card-wrapper[data-view="horizontal"] {
  flex-direction: row;
}
.card-wrapper[data-view="vertical"] {
  flex-direction: column;
}

document.querySelector('.wrapper').addEventListener('click', function(e) {
  const view = e.target.dataset.view;
  if (view && e.target.tagName === 'BUTTON') {
    this.querySelector('.card-wrapper').dataset.view = view;
  }
});

https://jsfiddle.net/7Leb60y9/

Второе.

<div class="wrapper">
  <button data-view="horizontal">Горизонтально</button>
  <button data-view="vertical">Вертикально</button>
  <div class="card-wrapper active" data-view="horizontal">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <div class="card-wrapper" data-view="vertical">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

.card-wrapper {
  display: none;
}
.card-wrapper.active {
  display: flex;
}
.card-wrapper[data-view="horizontal"] {
  flex-direction: row;
}
.card-wrapper[data-view="vertical"] {
  flex-direction: column;
}

document.querySelector('.wrapper').addEventListener('click', function(e) {
  const view = e.target.dataset.view;
  if (view && e.target.tagName === 'BUTTON') {
    document.querySelectorAll('.card-wrapper').forEach(n => {
      n.classList.toggle('active', n.dataset.view === view);
    });
  }
});

https://jsfiddle.net/dq2hpfzj/

Comments

[Вадим]

Вопрос в реальных проектах такое реализуется только на фронте или от backend что-либо нужно?

Answer 2

[Stimulate]

https://jsfiddle.net/4kpg037u/

Answer 3

[Шохрух Шаймардонов]

Так?

Comments

[Вадим]

Не совсем нужно не менять расположение!
Нужно что показывалась другая карточка!