/* (PART A) REMOVE BULLETS */
.collapsible, .collapsible ol, .collapsible ul {
  list-style-type: square; color: #ffffff;
}

/* (PART B) COLLAPSIBLE LIST CONTAINER */
.collapsible {
  max-width: 100%; /* optional */
  padding: 20px; margin: 0;
  color: #ffffff; background: #6e6f71;
}

/* (PART C) CONTROL SPACING & INDENTATION */
.collapsible ol, .collapsible ul { padding-left: 20px; }
.toggle + ol, .toggle + ul { margin-top: 1px; }
.collapsible li { padding: 5px; }

/* (PART D) SHOW & HIDE CHILDREN */
.collapsible ol, .collapsible ul { display: none; }
.toggle.open + ol, .toggle.open + ul { display: block; }

/* (PART E) ADD TOGGLE ARROW */
.toggle { cursor:pointer; }
.toggle::after {
  float: right; content: "\27A4";
  font-size: 20px; line-height: 1px; font-weight: 700; 
  transition: all 0.3s;
}
.toggle.open::after { transform: rotate(90deg); }

/* (PART F) SEPARATOR - OPTIONAL */
.collapsible ul {
  border-bottom: 1px solid #fff;
}

/* (X) NOT IMPORTANT */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}