* {
  box-sizing: border-box;
}
.wrapper1 {
  border: none;
}
.inner1 {
  border: none;
  max-width: 97%;
  margin: auto;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] ~ label {
  background: black;
  height: 30px;
  color: #fff;
  padding: 5px;
  display: block;
}
input[type=checkbox] ~ label ~ .content1 { 
  opacity: 0;
  height: 0;
  display: none;
}
input[type=checkbox]:checked ~ label ~ .content1 { 
  opacity: 0;
  height: 0;
  display: block;
}
.content1 {
  background: none;
  height: auto;
  padding: 5px;
  display: block;
  clear: both;
}

* {
  box-sizing: border-box;
}
.wrapper2 {
  border: none;
}
.inner2 {
  border: none;
  max-width: 97%;
  margin: auto;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] ~ label {
  background: black;
  height: 30px;
  color: #fff;
  padding: 5px;
  display: block;
}
input[type=checkbox] ~ label ~ .content2 { 
  opacity: 0;
  height: 0;
  display: none;
}
input[type=checkbox]:checked ~ label ~ .content2 { 
  opacity: 0;
  height: 0;
  display: block;
}
.content2 {
  background: none;
  height: auto;
  padding: 5px;
  display: block;
  clear: both;
}