Toggle show/hide - Pure CSS3

by agib

HTML

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Click here to read more about HTML!</label>
<div class="collapsible-container">HTML - is a language for web page markup.</div>
<br>    
<br>    
<input class="toggle-box" id="identifier-2" type="checkbox" >
<label for="identifier-2">How about clicking here??</label>
<div class="collapsible-container">Bacon ipsum dolor sit amet bresaola rump tail frankfurter jowl beef ribs andouille biltong. Shank short ribs turducken, shankle beef ground round corned beef tri-tip fatback andouille bacon pastrami strip steak kielbasa. Salami shankle kielbasa, cow meatloaf landjaeger jerky turkey jowl prosciutto rump shank chuck doner brisket. Ribeye brisket fatback, strip steak sausage landjaeger tri-tip. Frankfurter meatloaf ground round sirloin ham doner swine short ribs corned beef turducken pork capicola sausage.

Tongue kielbasa t-bone, chicken strip steak beef ribs filet mignon cow ribeye drumstick kevin shank tail bacon. Meatball pork pancetta ribeye, beef pork chop tongue cow. Salami ball tip short ribs brisket. Hamburger biltong ham hock short ribs tenderloin pastrami landjaeger beef ribs fatback strip steak kielbasa. Pig t-bone filet mignon ground round turducken brisket rump capicola meatball boudin drumstick bresaola strip steak frankfurter cow.

Biltong frankfurter sirloin cow swine jerky. Kielbasa tongue pork chop, shank turkey frankfurter landjaeger cow short loin spare ribs shoulder rump leberkas. Ham capicola salami ground round frankfurter brisket corned beef jerky drumstick doner andouille kielbasa tri-tip spare ribs chuck. Short loin ribeye pancetta tri-tip shankle beef ribs turducken.</div>

CSS

body {
    font-family: Arial, sans-serif;
}
.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
    text-transform: uppercase;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + .collapsible-container {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + .collapsible-container {
  display: block;
}

.toggle-box + label:before {
  color: black;
  content: "\2228";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
     -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}