Create Accordion on html and js

Task: create an accordion using css html and java script

Java Script code:

let arrObj = [];

function addInObjArr() {
  let inputV = document.getElementById("btnAddQuestion").value;
  let inputS = document.getElementById("btnAddSecretAnswer").value;
  let htmlEr = document.getElementById("error");

  if (inputV == "" && inputS == "") {
    htmlEr.innerHTML = "Please enter form";
    htmlEr.style.height = "19px";
  } else if (inputV == "" && inputS !== "") {
    htmlEr.innerHTML = "Please enter question";
    htmlEr.style.height = "19px";
  } else if (inputV !== "" && inputS == "") {
    htmlEr.innerHTML = "Please enter answer";
    htmlEr.style.height = "19px";
  } else if (inputV !== "" && inputS !== "") {
    htmlEr.style.height = "0px";
    arrObj.push(Object = {
      question: inputV,
      secret: inputS,
      id: Date.now(),
      opOrCl: true,
    })
    console.log(arrObj)
    document.getElementById("btnAddQuestion").value = "";
    document.getElementById("btnAddSecretAnswer").value = "";
    renderList();
  }
}


function renderList() {
  let a = document.getElementById("showDiv");
  a.innerHTML = "";
  arrObj.forEach(el => {
    showOneElem(el);
  });
}

function showOneElem(el) {
  let showDiv = document.getElementById("showDiv");
  let hideText = document.createElement("div");
  let delBtn = document.createElement("div");
  let delBtnOb = document.createElement("div");
  let firstStep = document.createElement("div");
  let secondStep = document.createElement("div");
  let moreMDiv = document.createElement("div");

  firstStep.innerHTML += el.question;
  hideText.innerHTML += el.secret;

  secondStep.appendChild(hideText);
  moreMDiv.appendChild(firstStep);
  moreMDiv.appendChild(secondStep);
  moreMDiv.appendChild(delBtn);
  showDiv.appendChild(moreMDiv);

  if (el.opOrCl == false) {
    secondStep.classList.add("watchSecondStep");
  } else {
    secondStep.classList.add("secondStep");
  }

  moreMDiv.classList.add("moreMDiv");
  delBtnOb.classList.add("delBtnOb");
  delBtn.classList.add("delBtn");
  firstStep.classList.add("firstStep");

  firstStep.onclick = () => {
    let h = hideText.offsetHeight;
    if (secondStep.style.height > "0px") {
      secondStep.style.height = "0px";
      secondStep.style.marginTop = "0px";
      secondStep.style.paddingTop = "0px";
      secondStep.style.borderTop = "none";
      secondStep.style.opacity = 0;
      el.opOrCl = true;
    } else {
      secondStep.style.height = `${h}px`;
      secondStep.style.marginTop = "4px";
      secondStep.style.paddingTop = "4px";
      secondStep.style.borderTop = "1px solid #FFF";
      secondStep.style.opacity = 1;
      el.opOrCl = false;
    }
    console.log(h)
  };

  delBtn.onclick = () => delEl(el.id);
}

function delEl(el) {
  arrObj = arrObj.filter((elem) => {
    if (elem.id == el) {
      return false;
    }
    return true;
  })
  renderList()
}

.body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  background-color: #363636;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.formsDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: calc(100% - 5px);
  gap: 16px;
  background-color: #5e5e5e;
}

.input {
  padding: 0px 8px;
  background-color: #363636;
  width: 70%;
  height: 60px;
  font-size: 25px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0;
  color: #f5f5f5;
  outline: 0cap;
  box-sizing: border-box;
}

.btn {
  background-color: #363636;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 2s all;
  color: #f5f5f5;
  width: 70%;
  height: 60px;
  font-size: 25px;
}

.showDiv {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 50px;
  width: 50%;
  overflow: auto;
  max-height: 100%;
  gap: 16px;
}

.mDiv {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.moreMDiv {
  padding: 8px 16px;
  background-color: #5e5e5e;
  width: 70%;
  border-radius: 15px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  transition: 3s all;
  position: relative;
}

.error {
  color: #ff0000;
  font-size: 19px;
  height: 0px;
  overflow: hidden;
}

.firstStep {
  width: calc(100% - 28px);
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  color: #f5f5f5;
  min-height: 32px;
}

.delBtn {
  width: 20px;
  height: 20px;
  transition: 1s all;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
}

.txt {
  color: #f5f5f5;
}

.secondStep {
  height: 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: row;
  transition: 0.3s all;
  color: #f5f5f5;
}

.watchSecondStep {
  display: flex;
  align-items: center;
  flex-direction: row;
  transition: 0.3s all;
  max-height: 300px;
  overflow: auto;
  color: #f5f5f5;
}

.showDiv::-webkit-scrollbar {
  width: 5px;
}

.showDiv::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.showDiv::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.moreMDiv:hover .delBtn {
  background-image: url(./img/Close\ remove\ 1.svg);
}

.btn:hover {
  cursor: pointer;
  background-color: rgb(180, 190, 200);
}

input::placeholder {
  color: whitesmoke;
}

HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body class="body">
  <div class="mainDiv">
    <div class="formsDiv">
      <input class="btnAddQuestion input" placeholder="Add question" id="btnAddQuestion">
      </input>
      <input class="btnAddSecretAnswer input" placeholder="Add secret answer" id="btnAddSecretAnswer">

      </input>
      <div class="error" id="error"></div>

      <div class="btnShowArr btn" onclick="addInObjArr()">
        Add question
      </div>
    </div>
    <div class="showDiv" id="showDiv">
    </div>
  </div>
</body>
<script src="./js.js"></script>

</html>

Result: