A Collapsible Welcome Box

<div id="welcomebox">
  <div class="header">
    <div class="title">
      This is an info/welcome box
    </div>
  </div>
  <input type="checkbox" name="welcomecollapse" checked="checked" id="collapse" />
  <label for="collapse">
  </label>
  <div class="content">
    
    <!-- ANNOUNCEMENTS -->
    <div class="announcements">
      <div>Announcements</div>
      
      <!-- ANNOUNCEMENT ONE -->
      <strong>DATE</strong>
      <p>Your announcement</p>
      
      <!-- ANNOUNCEMENT TWO -->
      <strong>DATE</strong>
      <p>Another announcement</p>
      
      <!-- ANNOUNCEMENT THREE -->
      <strong>DATE</strong>
      <p>Another announcement</p>
      
    </div>
    <!-- END ANNOUNCEMENTS -->
    
    <!-- STAFF HERE -->
    <div class="staff">
      <div>Staff</div>
      <div class="staffbox one">
        <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large.100x100.png.663f550c770690fcda584c94ef28084c.png" /><div>Name One</div>
      </div>
      <div class="staffbox">
        <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large.100x100.png.663f550c770690fcda584c94ef28084c.png" /><div>Name Two</div>
      </div>
    </div>
    <!-- END STAFF -->

    <div class="aboutus">
      <div>About Us</div>
      Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. <p />Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. Put the stuff about you here. 
    </div>
    <div class="footer">
      A footer if you want it
    </div>
  </div>
</div>

<style>#welcomebox {
  width: 100%;
  padding: 2px;
  position: relative; /* so that we can absolutely position the expansion */
  font-family: sans-serif;
}

/* your title styles */
#welcomebox > .header {
  background: #1a1a1a;
  border: 1px solid #ccc;
  outline: 1px solid #0a0a0a;
  color: #efefef;
  padding: 10px;
}

#welcomebox > .header > .title {
  flex-grow: 2; /* title takes up the most space */
  font-size: 2em;
}

#welcomebox input {
  display: none; /* hide the checkbox */
}

#welcomebox label {
  position: absolute;
  color: #efefef;
  right: 0; /* push me to the right */
  top: 9px; /* change this as necesary */
}

#welcomebox label:hover {
  cursor: pointer; /* let user know that this does something */
}

/* display a plus sign */
#welcomebox label:after {
  color: white;
  display: inline-block;
  content: '+';
  padding: 5px 50px;
}

/*....and a minus sign on click/collapse */
#welcomebox #collapse:not(:checked) ~ label[for="collapse"]:after {
  color: white;
  display: inline-block;
  content: '-';
  padding: 5px 50px;
}

/******************** GENERAL CONTENT STYLING *************************/

#welcomebox > .content {
  display: flex; /* put the divs next to each other */
  flex-wrap: wrap;
  padding: 1%;
  color: #ccc;
  background: #1a1a1a;
  height: 230px; /* adjust as necessary */
  overflow: hidden;
}

#welcomebox > .content > div {
  max-height: 160px; /* adjust as necessary, affects all boxes */
  overflow-y: auto;
}

#welcomebox > .content > div:first-child {
  margin-right: 5px; /* first box gets a margin */
}

#welcomebox > .content > div:last-child {
  margin-left: 5px; /* l;ast box gets a margin */
}

/******************** END CONTENT *************************/

/*************** ANNOUNCEMENTS ******************/
#welcomebox .announcements {
  padding: 5px;
  flex-basis: 25%;
}
/*************** END ANNOUNCEMENTS ******************/

/********************** STAFF ****************************/
#welcomebox .staff {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  margin: 0 5px;
  padding: 0 2%;
}

#welcomebox .staff > div:first-child {
  flex-basis: 100%; /* make the staff title full width */
}

/* first staff bit gets a margin */
#welcomebox .staff > .staffbox.one {
  margin-right: 5px;
}
/******************** END STAFF *********************/

/********************** ABOUT US **********************/

#welcomebox .aboutus {
  flex-basis: 50%;
  flex-grow: 2;
}

/******************* END ABOUT US ****************/

/* FOOTER IN CASE YOU WANT IT **********************/

#welcomebox .footer {
  flex-basis: 100%;
  color: #efefef;
  margin: 5px 0;
  padding: 1%;
  text-align: center;
  text-transform: uppercase;
}


/************** GENERAL STUFF THAT OVERWRITES THE EARLIER STUFF *************/

/* VVV  applies to all of the titles in the content VVV */
#welcomebox > .content > .announcements > div:first-child,
#welcomebox > .content > .staff > div:first-child,
#welcomebox > .content > .aboutus > div:first-child {
  font-size: 1.5em;
  margin-bottom: 5px;
}

/* hide on click */
#welcomebox #collapse:not(:checked) ~ label[for="collapse"] ~ .content {
  display: none;
  }</style>