<details>

  <summary>Accordion 1</summary>
  
  <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" /></section>
  
  <details>

    <summary>Accordion 1-1</summary>
    
    <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_1151.jpg" alt="" title="" /></section>
  
    <details>

      <summary>Accordion 1-1-1</summary>

      <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0121.jpg" alt="" title="" /></section>
    </details>
  
    <details>
      
      <summary>Accordion 1-1-2</summary>

      <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" /></section>
    </details>
  
    <details>
      
      <summary>Accordion 1-1-3</summary>

      <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_1151.jpg" alt="" title="" /></section>
    </details>
  </details>
  
  <details>

    <summary>Accordion 1-2</summary>
    
    <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" /></section>
  </details>
  
  <details>

    <summary>Accordion 1-3</summary>
    
    <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0121.jpg" alt="" title="" /></section>
  </details>
</details>

<details>

  <summary>Accordion 2</summary>
  
  <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_0115.jpg" alt="" title="" /></section>
</details>

<details>

  <summary>Accordion 3</summary>
  
  <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/IMG_1151.jpg" alt="" title="" /></section>
</details>

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

$black: rgb(0, 0, 0);
$white: lighten($black, 100%);
$space: 10px;

@keyframes open {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

body {
  font-family: 'Roboto', sans-serif;
  padding: 15px;
}

details {
  border: solid 1px $black;
  padding: $space;
  
  img {
    width: 40%;
  }
  
  details {
    margin-left: $space * 2;
    
    &:first-of-type {
      margin-top: $space * 2;
    }
  }
  
  & + details {
    border-top: 0;
  }
  
  &[open] {
    background-color: lighten($black, 90%);
    
    & > summary {
      border-bottom: solid 1px $black;
      margin-bottom: $space;

      & ~ * {
        animation: open .5s ease-in-out;
      }
    }
  }
  
  summary {
    background-color: $white;
    cursor: pointer;
    margin: -$space;
    padding: $space;
    outline: none;
    
    & ~ * {
      transform-origin: center top;
    }
  }
}