No Javascript Toggle

index.html

<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>

no-javascript-toggle.markdown

No Javascript Toggle

Toggle content (slide up/down) by using inputs, labels, and CSS sibling selectors

A Pen by Drew Bolles on CodePen.

License.

style.sass

@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: "-"