Edit in JSFiddle

<div class="accordion">
  <div class="accordion-item">
    <input id="accordion-1" type="checkbox" name="accordion" />
    <label for="accordion-1" class="accordion-title">Accordin 1</label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 1 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <input id="accordion-2" type="checkbox" name="accordion" />
    <label for="accordion-2" class="accordion-title">Accordin 2</label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 2 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <input id="accordion-3" type="checkbox" name="accordion" />
    <label for="accordion-3" class="accordion-title">Accordin 3</label>
    <div class="accordion-content">
      <div class="content">
        <p>Accordion 3 content</p>
        <p>
          Suspendisse feugiat. Sed cursus turpis vitae tortor. In auctor lobortis lacus. Nunc interdum lacus sit amet orci. Nam commodo suscipit quam.</p>


        <p>In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce pharetra convallis urna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Phasellus tempus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
      </div>
    </div>
  </div>
</div>

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}

.accordion {
  margin:15px;
  border: 1px solid black;

  input {
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    border: 1px solid red;
    display: block;
    margin: 0;
    position:absolute;
  }

  .accordion-item {
    position:relative;  

    .accordion-title {
      display: block;
      padding: 10px 10px;
      background: #00aaff;
      border-bottom: 1px solid black;
      font-size: 16px;
      text-transform: uppercase;
      font-family: monospace;
    }

    &:last-child .accordion-title {
      border-bottom: 0;
    }
  }

  .accordion-content .content {
    padding: 10px 10px;

    p {
      margin-bottom: 10px;
    }
  }

  .accordion-content p {
    margin-top: 0;
  }

  input~.accordion-title {
    position: relative;

  }

  input~.accordion-content {
    max-height: 0;
    overflow: hidden;
  }

  input~.accordion-title:after {
    content: '';
    position: absolute;
    right: 15px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-width: 0 0 2px 2px;
    border-color: black;
    border-style: solid;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: .2s linear;
  }

  input:checked~.accordion-title:after {
    top: 15px;
    transform: rotate(135deg);
  }

  input:checked~.accordion-content {
    max-height: 500px;
    transition: 0.5s linear;
  }

}