A Pen by Oliver Knoblich.

CSS-Toggle-with-Jade.markdown

CSS Toggle with Jade

With smooth transitions, inspired by drbl.in/1248875

A Pen by Oliver Knoblich on CodePen.

License.

index.jade

.togglebox
  div
    input#radio1(type="radio", name="toggle", checked="checked")
    label(for="radio1") Pure CSS Toggle
    .content
      p Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.
      p Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.
  div
    input#radio2(type="radio", name="toggle")
    label(for="radio2") with HTML Jade
    .content
      p Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.
      p Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.
  div
    input#radio3(type="radio", name="toggle")
    label(for="radio3") and very pretty
    .content
      p Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.
      p Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.
  div
    input#radio4(type="radio", name="toggle")
    label(for="radio4") CSS Transitions
    .content
      p Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.
      p Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.
  div
    input#radio5(type="radio", name="toggle")
    label(for="radio5") Inspired by drbl.in/1248875
    .content
      p Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.
      p Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.

script.js

// Inspired by drbl.in/1248875

style.scss

@import "compass";
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('http://weloveiconfonts.com/api/?family=fontawesome');

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

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font: 16px/1 'Open Sans', sans-serif;
  color: #555;
  background: #456;
}

body {
  padding: 50px;
}

.togglebox {
  $w: 300px;
  $h: 400px;
  width: $w;
  height: $h;
  margin: 0 auto;
  background: #345;
  transform: translateZ(0);
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255,255,255,.2);
  background: #234;
  transition: .5s all;
  cursor: pointer;
}

label:hover {
  background: #1a2a3a;
}

label:after {
  content: '\f078';
  top: 0px;
  right: 20px;
  font-family: fontawesome;
  transition: .5s transform;
}

.content {
  height: 0;
  transition: .5s height;
  overflow: hidden;
}

input[type="radio"]:checked ~ label {
  color: rgba(255,255,255,.8);
}

input[type="radio"]:checked ~ label:after {
  transform: rotate(90deg);
}

input[type="radio"]:checked ~ .content {
  height: 150px;
}

p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
}