I've included the relevant code in this pen: https://codepen.io/whoismikeo/pen/YMvMmR

Basically I'm trying to have an intro section with a button that reveals a second section next to it (or under, on mobile).

<projectsheader class="row" id="Projects">
<h1>This Is a Title</h1>
      <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" 
            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-->


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;


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

I'm having two problems:

1) I can't figure out how to keep the flex columns from spilling out of the row container when it wraps them.

2) The onclick event that toggles the second flex column takes two clicks to activate at first. After that it only takes one.

I've tried messing with different row settings to prevent the columns spilling out and have been looking on here for a solution to the double click problem but nothing seems to be working.

Any help is super appreciated!

1 Answers

Community On Best Solutions

Your JavaScript code is checking if the element with id newFlexItem has display: none style property, thus this style property should be added to the HTML element for the checking logic to work on the first click -- it works after the first click because your JS code adds the display: none style property to the element in the else block.

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

As for the CSS issue, you should remove the height: 100vh because that depends on the view-port height.

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