Accordeon

 
  <div class="akkordeon">
    <div>
        <input id="akk-1" name="akkordeon-1" type="checkbox" /> <label for="akk-1">Klick mich!</label>
        <p>
            <strong>Text 01</strong><br />
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>

  <div>
        <input id="akk-2" name="akkordeon-1" type="checkbox" /> <label for="akk-2">Mich auch!</label>
        <p>
            <strong>Text 02 Lorem ipsum</strong><br />
            <br />
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </p>
  </div>

    <div>
        <input id="akk-3" name="akkordeon-1" type="checkbox" /> <label for="akk-3">Akkordeon</label>
        <p>
            <strong>Text 03 Lorem ipsum</strong><br />
            <br />
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
      </p>
    </div>
</div>
  <style>
  .akkordeon {
  width: 20em;
  padding: 0.2em; 
  background: white;
  border: 1px solid #e4e4e4;
  font-size:12px;
}
 
.akkordeon label{
  padding: 0.2em 1em;
  margin-bottom: 0.2em;
  position: relative;
  display: block;
  height: 1.5em;
  cursor: pointer;
  background: black;
  color: white;
}
.akkordeon label:hover{
  background: lime;
  color: black;
}
.akkordeon input + label {
  transition: all 0.5s ease-in-out;
}
.akkordeon input:checked + label,
.akkordeon input:checked + label:hover{
  background: orange;
}
 
.akkordeon p {
  overflow: hidden;
  height: 0;
  margin: 0;
  transition: all 0.5s ease-in-out;
}
 
.akkordeon input:checked ~ p{
  transition: all 0.5s ease-in-out;
  height: 7em;
}

.akkordeon {
  width: 20em;
  padding: 0,2em; 
  background: white;
  border: 1px solid #8a9da8;
}
 
.akkordeon label{
  padding: 0.2em 1em;
  margin-bottom: 0.2em;
  position: relative;
  display: block;
  height: 1.5em;
  cursor: pointer;
  background: black;
  color: white;
}
.akkordeon label:hover{
  background: grey;
  color: #fff;
}
.akkordeon input + label {
  transition: all 0.5s ease-in-out;
}
.akkordeon input:checked + label,
.akkordeon input:checked + label:hover{
  background: orange;
}
 
.akkordeon input{
        display: none;
}
 
.akkordeon p {
  overflow: hidden;
  height: 0;
  margin: 0;
  transition: all 0.5s ease-in-out;
}
 
.akkordeon input:checked ~ p{
  transition: all 0.5s ease-in-out;
  height: 7em;
}
  </style>