CSS Toggler

css-toggler.markdown

CSS Toggler

A Pen by James on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Cinzel:900&display=swap" rel="stylesheet">
<span class="container">
  <input type="checkbox">
  <div class="real-checkbox">
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIHN0eWxlPSIgZmlsbC1ydWxlOmV2ZW5vZGQ7IiBkPSJNIDQyIDYgTCAzOSA0MCBMIDI1IDQ0IEwgMTEgNDAgTCA4IDYgWiBNIDE2LjgwMDc4MSAyOCBMIDIwLjgwMDc4MSAyOCBMIDIwLjg5ODQzOCAzMC41IEwgMjUgMzEuODk4NDM4IEwgMjkuMTAxNTYzIDMwLjUgTCAyOS4zOTg0MzggMjYgTCAyMC42MDE1NjMgMjYgTCAyMC4zOTg0MzggMjIgTCAyOS42MDE1NjMgMjIgTCAyOS44OTg0MzggMTggTCAxNi4xMDE1NjMgMTggTCAxNS44MDA3ODEgMTQgTCAzNC4xMDE1NjMgMTQgTCAzMy42MDE1NjMgMjIgTCAzMi44OTg0MzggMzMuNSBMIDI1IDM2LjEwMTU2MyBMIDE3LjEwMTU2MyAzMy41IFogIj48L3BhdGg+PC9nPjwvc3ZnPg==">  
  </div>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus ad necessitatibus in velit, omnis dolore tenetur soluta assumenda itaque accusantium!</div>
</span>

style.css

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

body {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.container {
  margin: 0 auto;
  display: inline-block;
  position: relative;
}

input, input:checked {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.real-checkbox {
  z-index: 1000;
}

.real-checkbox, input:checked, input {
  display: inline-flex;
  justify-content: center;
  padding: 20px;
  align-items: center;
  border-radius: 10px;
  border: 1px solid black;
  background: white;
  transition: all 1s;
}

.container:hover .real-checkbox {
  transition: all 1s;
  border: 1px solid white;
  box-shadow: -5px 5px 10px 0px rgba(0,0,0, .5);
}

input ~ div:not(.real-checkbox) {
  display: block;
  padding: 0;
  font-family: 'Cinzel', serif;
  animation-name: growvert2;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  overflow: hidden;
  max-width: 80%;
  margin: auto;
}

input:checked ~ div:not(.real-checkbox) {
  height: auto;
  padding: 10px;
  animation: growvert 1s ease-in-out 0s forwards;
}

@keyframes growvert {
  from {
    max-height: 0px;
    padding: 0;
  }
  
  to {
    max-height: 120px;
    padding: 20px;
  }
}

@keyframes growvert2 {
  from {
    height: 120px;
    max-height: 120px;
    padding: 20px;
  }
  
  to {
    height: 0px;
    max-height: 0px;
    padding: 0px;
  }
}