<h1>No Javascript toggle</h1>
  <h2>Yay for CSS, and HTML</h2>
  <input type="checkbox" id="toggle-input" value="selected">
  <label class="toggle-label" for="toggle-input">toggle </label>
  <div class="toggle-content">
    <div class="module">
      <h3>Radical, dude</h3>
      <p>This is some content we want to toggle, and I think that's sweet.</p>
@import compass

// base styles

  padding: 24px
  margin-top: 0
  margin-bottom: 24px
  border-bottom: 1px solid #ccc
// module class styles

  border: 1px solid #ccc
  padding: 24px
// toggle feature styles

  display: none

  display: block
  cursor: pointer
  padding: 12px
  font-weight: 600
    background-color: #ccc
    content: "+"
  max-height: 0
  overflow: hidden
  +transition(.3s ease max-height)

  & ~ .toggle-content
    max-height: 1000px
  & + .toggle-label:after
    content: "-"
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.