<header>
  <h1>No Javascript toggle</h1>
  <h2>Yay for CSS, and HTML</h2>
</header>
<main>
  <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>
    </div>
  </div>
</main>
@import compass

// base styles

body
  padding: 24px
  
h1,h2,h3,h4,h5,h6
  margin-top: 0
  
header
  margin-bottom: 24px
  border-bottom: 1px solid #ccc
  
// module class styles

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

#toggle-input
  display: none

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

#toggle-input:checked
  
  & ~ .toggle-content
    max-height: 1000px
  & + .toggle-label:after
    content: "-"

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.