Как сделать div развертываемым-разворачиваемым влево при нажатии на кнопку, используя JAVASCRIPT, а не jQuery?

Question

У меня есть панель, которая содержит некоторые параметры, как показано на изображении:

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

Пример: если у меня есть допустим, 20 вариантов, он откроется влево, как показано на 5 изображении в каждой части и если я снова нажму на него, он будет свернут, как 1-е изображение.

Как это можно сделать, используя javascript, html и css только при условии, что все по природе является динамическим c. Любая помощь будет оценена.

Спасибо

Answer 1

вы можете использовать flex-flow: column wrap и overflow: hidden, чтобы сделать что-то вроде этого.

PO C:

const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;

function expendOrRetract() {
  if (isExpened) {
    expend.innerHTML = ">";
    tools.classList.remove("extend");
  } else {
    expend.innerHTML = "<";
    tools.classList.add("extend");

  }
  isExpened = !isExpened;
}

* {
  box-sizing: border-box;
}

.tools {
  position: relative;
  width: 20px;
  display: flex;
  flex-flow: column wrap;
  height: 80px;
  overflow: hidden;
}

.tools.extend {
  width: 40px;
}

.expend {
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: solid 1px;
}

.tool {
  height: 20px;
  width: 20px;
  border: solid 1px;
}

<div class="expend" onclick="expendOrRetract()">></div>
<div class="tools">

  <div class="tool">t1</div>
  <div class="tool">t2</div>
  <div class="tool">t3</div>
  <div class="tool">t4</div>
  <div class="tool">t5</div>
  <div class="tool">t6</div>
  <div class="tool">t7</div>
  <div class="tool">t8</div>

</div>

Вы можете использовать diraction: rtl влево:

const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;

function expendOrRetract() {
  if (isExpened) {
    expend.innerHTML = "<";
    tools.classList.remove("extend");
  } else {
    expend.innerHTML = ">";
    tools.classList.add("extend");

  }
  isExpened = !isExpened;
}

* {
  box-sizing: border-box;
}

.tools {
  direction: rtl;
  position: absolute;
  right: 10px;
  top: 30px;
  width: 20px;
  display: flex;
  flex-flow: column wrap;
  height: 80px;
  overflow: hidden;
}

.tools.extend {
  width: 40px;
}

.expend {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: solid 1px;
}

.tool {
  height: 20px;
  width: 20px;
  border: solid 1px;
}

<div class="expend" onclick="expendOrRetract()">
  < </div>
    <div class="tools">

      <div class="tool">t1</div>
      <div class="tool">t2</div>
      <div class="tool">t3</div>
      <div class="tool">t4</div>
      <div class="tool">t5</div>
      <div class="tool">t6</div>
      <div class="tool">t7</div>
      <div class="tool">t8</div>

    </div>