/* 
  Making the collapsible's title position relative allows positioning the ::after pseudoelement
  relative to the title position.  Having cursor: pointer makes it look "clickable"
*/
.collapsible .title {
  position: relative;
  cursor: pointer;
}

/* 
  Positions the open/close indicator halfway down. Rotates it to make it look like an arrow. 
*/
.collapsible .title::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  /* By using an em scale, the arrows will size with the font */
  width: 0.4em;
  height: 0.4em;
  border-right: 0.125em solid #000000;
  border-top: 0.125em solid #000000;
  /* Point down */
  transform: translate(.2em, -.2em) rotate(135deg);
}

.collapsible.show .title::after {
  /* Point up */
  transform: translate(.2em) rotate(-45deg);
}

/* 
  Hides the collapsible's content (height: 0, overflow: hidden) and adds transition to non-zero height
*/
.collapsible .collapsible-container {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}

/*
  Add space at the bottom of the content when it's visible
*/
.collapsible.show .collapsible-container {
  margin-bottom: 1rem;
}