Trouble with Jquery Show/Hide

I've made a dropdown list of events for a client's page.

Ideally, I want the button with the month to open the event list, but as it sits currently, its all viewable and only toggles between visibility when the button is clicked. How can I start it off with not being visible and then toggle?

The second issue I'm having is that when the "info" button is clicked, the event under it shortens in width for some reason?

Here is an image of the issue.

Here is the link to the physical site.

Code:

jQuery(function() {
  jQuery(".click-to-reveal").click(function() {
    jQuery(this)
      .children()
      .toggleClass("rotate");
    jQuery(this)
      .next("div.click-to-reveal-block")
      .slideToggle();
  });
});

$(document).ready(function() {
  $("#event-container-two").click(function() {
    $("#event-info-container").toggle();
  });
  $(".second").click(function() {
    $(".reveal-second").toggle();
  });
  $(".third").click(function() {
    $(".reveal-third").toggle();
  });
  $(".fourth").click(function() {
    $(".reveal-fourth").toggle();
  });
  $(".fifth").click(function() {
    $(".reveal-fifth").toggle();
  });
  $(".sixth").click(function() {
    $(".reveal-sixth").toggle();
  });
  $(".seventh").click(function() {
    $(".reveal-seventh").toggle();
  });
  $(".eighth").click(function() {
    $(".reveal-eighth").toggle();
  });
  $(".ninth").click(function() {
    $(".reveal-ninth").toggle();
  });
});

#content {
  margin-top: 50px;
  width: 100%;
}


/* 
 * Button click
*/

button {
  font-family: 'AGENTUR';
  background: #cd9d2b;
  color: #f6eee1;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 60px;
  padding-right: 60px;
  font-size: 40px;
  border: none;
  cursor: pointer;
}

.click-to-reveal-block {
  margin-top: 20px;
  background-color: #cd9d2b;
  color: #f6eee1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#event-container {
  background-color: #cd9d2b;
  color: #f6eee1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f6eee1;
}

#event-container-one {
  padding-top: 30px;
  padding-left: 50px;
}

#event-container-two {
  border-left: 1px solid #f6eee1;
  padding-top: 25px;
  padding-left: 60px;
  padding-right: 60px;
  cursor: pointer;
}

#event-text {
  background-color: #cd9d2b;
  color: #f6eee1;
  font-size: 25px;
}

#event-info-text {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f6eee1;
  font-size: 25px;
}

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-left: 2px solid #cd9d2b;
  border-right: 2px solid #cd9d2b;
  border-bottom: 2px solid #cd9d2b;
  padding-top: 20px;
  padding-bottom: 60px;
  padding-left: 35px;
  padding-right: 25px;
  font-size: 25px;
}

#event-info-description {
  color: #cd9d2b;
}

#event-info-d {
  font-size: 20px;
}

#event-info-link {
  color: #cd9d2b;
  float: right;
  padding-right: 50px;
  text-decoration: underline;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div id="content">
  <button class="click-to-reveal">DECEMBER
  <img  src="https://static1.squarespace.com/static/546537f6e4b08689b03f27a1/t/5fadab28ff73a225b25eace2/1605217064042/Asset+1%40146x.png" width="60" height="60"/>
  </button>
  <div class="click-to-reveal-block" id="flex-block">
    <div class="click-to-reveal-inner-block">

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Seattle Arts & Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt, Dec 2, 2020
          </p>
        </div>
        <div id="event-container-two">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Seattle Arts & Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt. </p>
        </div>

        <div id="event-info-link">
          <a href="https://lectures.org/event/black-futures/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>
      </div>


      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Sixth and I in partnership with Loyalty Books, Dec 3, 2020
          </p>
        </div>
        <div id="event-container-two" class="second">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-second">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew with moderator Camonghne Felix. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.sixthandi.org/event/kimberly-drew-and-jenna-wortham/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Charis Books in partnership with For Keeps bookstore, Dec 5, 2020
          </p>
        </div>
        <div id="event-container-two" class="third">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-third">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Antonio Johnson and Donovan X. Ramsey, moderated by Theo Tyson. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.charisbooksandmore.com/event/envisioning-black-futures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Brooklyn Academy of Music, Dec 7, 2020
          </p>
        </div>
        <div id="event-container-two" class="fourth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fourth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Kimberly Drew and Jenna Wortham in conversation with Raquel Willis and Naima Green. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.bam.org/blackfutures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Uncle Bobbie’s Bookstore, Dec 8, 2020
          </p>
        </div>
        <div id="event-container-two" class="fifth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fifth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Tiona Nekkia McClodden. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.crowdcast.io/e/blackfutures/register" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> City Arts & Lectures with Marcus Books, Dec 9, 2020
          </p>
        </div>
        <div id="event-container-two" class="sixth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-sixth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Ashley Ford. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.cityarts.net/event/jenna-wortham-kimberly-drew/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> California African American Museum and Scripps College with book sales by Eso&nbsp;&nbsp;&nbsp; Won, Dec 10, 2020
          </p>
        </div>
        <div id="event-container-two" class="seventh">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-seventh">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Pierre Davis (No Sesso) among others. </p>
        </div>

        <div id="event-info-link">
          <a href="https://caamuseum.org/programs/talks-and-workshops/in-conversation-black-futures-with-jenna-wortham-kimberly-drew-and-select-contributors" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Source Booksellers (in Detroit), Dec 11, 2020
          </p>
        </div>
        <div id="event-container-two" class="eighth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-eighth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Taylor Aldridge. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.eventbrite.com/e/black-futures-author-event-tickets-128373896781" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Chicago Humanities Festival with book sales by Seminary Co-op, Dec 14, 2020
          </p>
        </div>
        <div id="event-container-two" class="ninth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-ninth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Eve L. Ewing. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.chicagohumanities.org/events/black-futures-kimberly-drew-jenna-wortham" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

    </div>
  </div>
</div>

Solution

To make your list hidden in the first load, you just have to make its display, hidden in the CSS. slideToggle() will in your JS code handle the rest of the job for you.

So you only need to do the following in the CSS:

.click-to-reveal-block {
  /* rest of code */
  display: none;
}

NOTE: There is no need to use display: flex; and its properties in your particular case. A simple display: block; will do the work which is slideToggle() will take care of it, so you only need a display: none; in this case.

For your second problem, the issue behind the sudden move of the next row happened because you did not specify any width for your rows so by default they will shrink (Because you used float CSS property on your Register Here parent element (#event-info-link), which causes it to be removed from the normal flow of the page and its box and occupy part of the next row width, with its own width once it gets visible), so to fix this you can specify the proper width for rows like below (or alternatively get rid of float property on the Register Here parent element and use text-align: right; on it instead, which is legitimate, but I won't change it in my try and I will stick with your current code):

#event-container {
  width: 100%;
  /* rest of code */
}

By considering all of the above, your final code will be something like this:

function onClick(clickElement, toggleElement) {
  $(clickElement).click(function() {
    $(toggleElement).toggle();
  });
}

$(document).ready(function() {
  $(".click-to-reveal").click(function() {
    $(this)
      .next("div.click-to-reveal-block")
      .slideToggle();
  });

  onClick("#event-container-two", "#event-info-container");
  onClick(".second", ".reveal-second");
  onClick(".third", ".reveal-third");
  onClick(".fourth", ".reveal-fourth");
  onClick(".fifth", ".reveal-fifth");
  onClick(".sixth", ".reveal-sixth");
  onClick(".seventh", ".reveal-seventh");
  onClick(".eighth", ".reveal-eighth");
  onClick(".ninth", ".reveal-ninth");
});

#content {
  margin-top: 50px;
  width: 100%;
}


/* 
 * Button click
*/

button {
  font-family: 'AGENTUR';
  background: #cd9d2b;
  color: #f6eee1;
  padding: 16px 60px;
  font-size: 40px;
  border: none;
  cursor: pointer;
}

.click-to-reveal-block {
  margin-top: 20px;
  background-color: #cd9d2b;
  color: #f6eee1;
  display: none;
}

#event-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f6eee1;
}

#event-container-one {
  padding-top: 30px;
  padding-left: 50px;
}

#event-container-two {
  border-left: 1px solid #f6eee1;
  padding: 25px 60px 0;
  cursor: pointer;
}

#event-text {
  background-color: #cd9d2b;
  color: #f6eee1;
  font-size: 25px;
}

#event-info-text {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f6eee1;
  font-size: 25px;
}

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-width: 0 2px 2px;
  border-color: #cd9d2b;
  border-style: solid;
  padding: 20px 25px 60px 35px;
  font-size: 25px;
}

#event-info-description {
  color: #cd9d2b;
}

#event-info-d {
  font-size: 20px;
}

#event-info-link {
  color: #cd9d2b;
  float: right;
  padding-right: 50px;
  text-decoration: underline;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div id="content">
  <button class="click-to-reveal">DECEMBER
  <img  src="https://static1.squarespace.com/static/546537f6e4b08689b03f27a1/t/5fadab28ff73a225b25eace2/1605217064042/Asset+1%40146x.png" width="60" height="60"/>
  </button>
  <div class="click-to-reveal-block" id="flex-block">
    <div class="click-to-reveal-inner-block">

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Seattle Arts & Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt, Dec 2, 2020
          </p>
        </div>
        <div id="event-container-two">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Seattle Arts & Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt. </p>
        </div>

        <div id="event-info-link">
          <a href="https://lectures.org/event/black-futures/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>
      </div>


      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Sixth and I in partnership with Loyalty Books, Dec 3, 2020
          </p>
        </div>
        <div id="event-container-two" class="second">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-second">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew with moderator Camonghne Felix. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.sixthandi.org/event/kimberly-drew-and-jenna-wortham/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Charis Books in partnership with For Keeps bookstore, Dec 5, 2020
          </p>
        </div>
        <div id="event-container-two" class="third">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-third">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Antonio Johnson and Donovan X. Ramsey, moderated by Theo Tyson. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.charisbooksandmore.com/event/envisioning-black-futures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Brooklyn Academy of Music, Dec 7, 2020
          </p>
        </div>
        <div id="event-container-two" class="fourth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fourth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Kimberly Drew and Jenna Wortham in conversation with Raquel Willis and Naima Green. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.bam.org/blackfutures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Uncle Bobbie’s Bookstore, Dec 8, 2020
          </p>
        </div>
        <div id="event-container-two" class="fifth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fifth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Tiona Nekkia McClodden. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.crowdcast.io/e/blackfutures/register" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> City Arts & Lectures with Marcus Books, Dec 9, 2020
          </p>
        </div>
        <div id="event-container-two" class="sixth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-sixth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Ashley Ford. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.cityarts.net/event/jenna-wortham-kimberly-drew/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> California African American Museum and Scripps College with book sales by Eso&nbsp;&nbsp;&nbsp; Won, Dec 10, 2020
          </p>
        </div>
        <div id="event-container-two" class="seventh">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-seventh">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Pierre Davis (No Sesso) among others. </p>
        </div>

        <div id="event-info-link">
          <a href="https://caamuseum.org/programs/talks-and-workshops/in-conversation-black-futures-with-jenna-wortham-kimberly-drew-and-select-contributors" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Source Booksellers (in Detroit), Dec 11, 2020
          </p>
        </div>
        <div id="event-container-two" class="eighth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-eighth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Taylor Aldridge. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.eventbrite.com/e/black-futures-author-event-tickets-128373896781" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Chicago Humanities Festival with book sales by Seminary Co-op, Dec 14, 2020
          </p>
        </div>
        <div id="event-container-two" class="ninth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-ninth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham & Kimberly Drew in conversation with Eve L. Ewing. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.chicagohumanities.org/events/black-futures-kimberly-drew-jenna-wortham" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

    </div>
  </div>
</div>

Some notes to increase readability

I just modify your code a bit to avoid redundancy with the use of shorthands and functions

In the CSS I used some shorthand like border-width, padding, etc. properties, to prevent writing something like:

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-left: 2px solid #cd9d2b;
  border-right: 2px solid #cd9d2b;
  border-bottom: 2px solid #cd9d2b;
  padding-top: 20px;
  padding-bottom: 60px;
  padding-left: 35px;
  padding-right: 25px;
  font-size: 25px;
}

So it can be shortened and ~~may not be~~ more readable 😄, like:

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-width: 0 2px 2px;
  border-color: #cd9d2b;
  border-style: solid;
  padding: 20px 25px 60px 35px;
  font-size: 25px;
}

With the use of functions in JS, I just tried to prevent redundancy on similar actions.

E. G.

$(".second").click(function() {
   $(".reveal-second").toggle();
});
$(".third").click(function() {
   $(".reveal-third").toggle();
});
// rest of similar actions

To something like this:

function onClick(clickElement, toggleElement) {
  $(clickElement).click(function() {
     $(toggleElement).toggle();
  });
}

// ----
onClick("#event-container-two", "#event-info-container");
onClick(".second", ".reveal-second");
onClick(".third", ".reveal-third");
// rest of code

Which can prevent redundancy and make it easier to read.

$ and jQuery are essentially the same thing, but to prevent conflict with other libraries sometimes we may use jQuery instead of $ but if you don't have such a library it could be better to stick with one of them (I personally prefer $ because it is less annoying). So try to not use them together to prevent inconsistency in your code-base.
An IIFE function (jQuery(function() {...})) is not necessary to attach an onclick event to your element ('.click-to-reveal') and it can be done like others in the $(document).ready(...) phase.
I did not find any usage for jQuery(this).children().toggleClass("rotate");, so I ended up deleting it from your code. This may have been used in other parts of your code but there is no usage of it in this current snippet.

These notes are not necessary to implement but if you are comfortable with them, it can be a good practice to write a more readable code.