Step 1: Read All The Things

Follow the instructions and set up your things and then choose some more things (well, you kinda can't do that).

Then, click the "Next" button and see the magical sliding things.

---

Really, this is all just filler text so the content looks a bit more interesting.

Mlkshk venmo forage, sustainable XOXO shoreditch letterpress cardigan ugh deep v iceland meh migas. Truffaut pour-over pitchfork, street art brooklyn chicharrones leggings tote bag mustache chia hashtag synth flannel paleo. Scenester kinfolk paleo locavore butcher. Godard skateboard cold-pressed quinoa portland pop-up. Four loko chartreuse echo park, cray shoreditch austin mustache etsy offal edison bulb. Woke unicorn kale chips, enamel pin glossier leggings umami fanny pack farm-to-table hashtag 90's. Schlitz hell of quinoa pinterest, migas XOXO banh mi raclette gochujang direct trade tousled messenger bag succulents prism.

Raclette man bun ethical williamsburg aesthetic wayfarers venmo DIY, brooklyn deep v. Cronut whatever cray green juice lomo gentrify dreamcatcher. Tbh unicorn prism, aesthetic flannel waistcoat actually. Franzen godard prism, ethical taxidermy aesthetic polaroid migas pabst. Synth art party lomo literally, iPhone VHS try-hard kinfolk. Pabst meditation 3 wolf moon, enamel pin heirloom paleo put a bird on it keytar tacos venmo. Mumblecore butcher everyday carry yuccie, single-origin coffee chicharrones meh.

Step 2: Yay!

It worked or whatever. Okay, so there is this step, but it's a fake one.

There's nothing really to do here except notice the content sliding around.

Keep going?

Step 3: Bonus!

These sliding panels use one attribute state-control-thing. It worked or whatever. See?

The primary containing element here has a step attribute. This is step 3. The cool thing about this is that you can set the default step right in your view code (HTML/template) to control which content panel this should start with and it will, and the buttons manage themselves too.

Step 4: Magic

You can just add as many .content blocks as you need. But, don't forget to make concessions for additional blocks in the CSS:

[step="5"] .content {
  transform: translateX(-400%);
}

Rewind