Событие onclick занимает два клика, из-за разливов нового гибкого элемента

Question

Я включил соответствующий код в эту ручку: https://codepen.io/whoismikeo/pen/YMvMmR

В основном я пытаюсь создать вступительный раздел с кнопкой, которая показывает второй раздел рядом с ним (или под мобильным).

<projectsheader class="row" id="Projects">
<h1>This Is a Title</h1>
</projectsheader>
    <projects>
      <div class="row"> <!--start flex row-->
        <div class="col" id="list-intro"> <!--start intro section-->
          <div class="to-do"> <!--start intro-->
          <h2>Here's a Subtitle</h2>
          <p>And a description!</p>
            <button type="button" 
            class="btn" 
            onclick="addProject();">Create a Flexy</button>
          </div> <!--end intro-->
        </div> <!--end intro section-->
        <div class="col" id="react-list"> <!--start hidden project section-->
          <div class="proj"> <!--start content-->
          <h2>This is Filler</h2>
          <p>A wee little app goes here.</p>
        </div> <!--end content-->
       </div> <!--end hidden project section-->
    </div> <!--end flex row-->
  </projects>

CSS:

projectsheader {
    font-size: 10vh;
    justify-content: center;
    color: #011C43;
    margin-top: 1em;
    font-family: sans-serif;
}

h2, p {
  font-family: sans-serif;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 1em;
    flex-basis: 100%;
    flex: 1;
}

projects .col{
    background-color: rgb(192, 164, 255);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

projects .row{
    background-color: coral;
    height: 75vh;
    flex-wrap: wrap;
}

.to-do {
    margin: auto;
    padding: 5em;
}

#react-list {
    display: none;
    margin: auto;
    flex-direction: column;
    justify-content: space-around;
    margin: 1em;
    min-width: 50%;
    flex: 2;
}

JS:

function addProject() {
   var target = document.getElementById("react-list");
   if (target.style.display === "none") {
      target.style.display = "flex";
   } else {
      target.style.display = "none";
   }
}

У меня две проблемы:

1) Я не могу понять, как не допустить выпадения гибких столбцов из контейнера строк, когда он их оборачивает.

2) Событие onclick, которое переключает второй столбец flex, сначала активируется двумя щелчками. После этого требуется только один.

Я пытался поиграть с разными настройками строки, чтобы предотвратить выпадение столбцов, и искал здесь решение проблемы двойного щелчка, но, похоже, ничего не работает.

Любая помощь очень ценится!

Answer 1

Ваш код JavaScript проверяет, имеет ли элемент с идентификатором newFlexItem свойство стиля display: none, поэтому это свойство стиля должно быть добавлено к элементу HTML, чтобы логика проверки работала при первом щелчке - он работает послесначала нажмите, потому что ваш код JS добавляет свойство стиля display: none к элементу в блоке else.

<div class="col" id="newFlexItem" style="display: none">

---

Что касается проблемы CSS, вы должны удалить height: 100vh, потому что этозависит от высоты смотрового окна.

projects .row {
    background-color: coral;
 /* height: 75vh; */
    flex-wrap: wrap;
}