Build a Better Accordion

Accordions are a useful way to handle groups of nested lists when there’s not a lot of screen real estate to play with – especially handy for off-canvas navigation on mobile devices. Don’t see yourself needing to build an accordion any time soon? That’s okay! We’ll talk about things that’ll help make anything you build even more awesome:

• Semantic markup (When do I use an “<a>”? When do I use a “<button>”?)
• Animatable and non-animatable CSS properties
• Making Sass do the work for you

After laying the groundwork, I’ll walk through building a mixin that lets us add good user affordance and silky-smooth CSS animations with a single line of code.

This talk is from ATXSass on 23 July 2015 – Here’s the video.

Transcript

1. Build a Better Accordion
2. Nick Piesco User Experience Engineer @nickpiesco
3. An accordion displays nested lists while saving real estate
4. (That seems oddly specific....)
5. • Proper semantics • Animatable and non-animatable CSS properties • Mixins with default values
6. Let’s talk baseball!
11. <ul class=”league-list”>
12. <ul class=”league-list”> <ul class=”division-list”> <ul class=”division-list”>
13. <ul class=”league-list”> <ul class=”division-list”> <ul class=”division-list”> <ul class=”team-list”> <ul class=”team-list”> <ul class=”team-list”> <ul class=”team-list”> <ul class=”team-list”> <ul class=”team-list”>
14. <nav class=”main-navigation”> <ul class=”league-list”> <li class=”league”> American League <ul class=”division-list”> <li class=”division”> East <ul class=”team-list”> <li class=”team”> <a href=”orioles.html”>Baltimore Orioles</a> </li> [ . . . ] </ul> [ . . . ] </li> [ . . . ] </ul> [ . . . ] </li> [ . . . ] </ul> </nav>
15. Expand and collapse
16. <li class=”division”> East <ul class=”team-list”> [ . . . ]
17. <li class=”division”> <button class=”list-toggle js-list-toggle”> East </button> <ul class=”team-list”> [ . . . ]
18. <li class=”division”> <button class=”list-toggle js-list-toggle”> East </button> <ul class=”team-list”> [ . . . ] * Separate presentational classes from JS classes to preserve future developer sanity *
19. But I don’t want a button; I want a link!
20. <a href=”#”>Foo</a> <a href=”javascript:void(0);”>Bar</a> <a href=”javascript:;”>Baz</a>
21. <a href=”#”>Foo</a> <a href=”javascript:void(0);”>Bar</a> <a href=”javascript:;”>Baz</a> Please don’t do any of this.
22. An <a> goes somewhere; A <button> does something
23. <li class=”division”> <button class=”list-toggle js-list-toggle”> East </button> <ul class=”team-list”> <li class=”team”> <a href=”orioles.html”>Baltimore Orioles</a> </li> [ . . . ]
24. <li class=”division”> <button class=”list-toggle js-list-toggle”> East </button> <ul class=”team-list”> <li class=”team”> <a href=”orioles.html”>Baltimore Orioles</a> </li> [ . . . ] Goes somewhere Does something
25. Paper over the styling differences with CSS
26. Make the <button> do something
27. $('.js-list-toggle').click(function() { $(this).next().toggleClass('open'); }); .league-list, .division-list, .team-list { display: none; transition: display 0.5s ease; &.open { display: block; } }
28. $('.js-list-toggle').click(function() { $(this).next().toggleClass('open'); }); .league-list, .division-list, .team-list { display: none; transition: display 0.5s ease; &.open { display: block; } } Nope!
29. Not all CSS properties are animatable!
30. Animatable CSS properties • color and opacity • transform • margin and padding • positioning • height and width https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
31. Sweet! Let’s adjust the height!
32. .league-list, .division-list, .team-list { height: 0; transition: height 0.5s ease; &.open { height: auto; } }
33. .league-list, .division-list, .team-list { height: 0; transition: height 0.5s ease; &.open { height: auto; } } Nope!
34. transition needs an explicit value
35. .league-list, .division-list, .team-list { max-height: 0; transition: max-height 0.5s ease; &.open { max-height: 8675309em; } }
36. .league-list, .division-list, .team-list { max-height: 0; transition: max-height 0.5s ease; &.open { max-height: 8675309em; } } Yay, it works!
37. The browser runs the entire animation, regardless of where the actual content stops
38. The browser runs the entire animation, regardless of where the actual content stops * 8675309em ~ 23 miles
39. .league-list, .division-list, .team-list { max-height: 0; transition: max-height 0.5s ease; &.open { max-height: 100vh; } }
40. .league-list, .division-list, .team-list { max-height: 0; transition: max-height 0.5s ease; &.open { max-height: 100vh; } } 1vh/vw = 1% of viewport height/width
42. Add ‘open’ and ‘closed’ arrows
43. $('.js-list-toggle').click(function() { $(this).toggleClass('list-open'); }); .list-toggle { position: relative; &:after { content: '\25bc'; // Down arrow position: absolute; right: 0.5em; &.list-open { &:after { content: '\25b2'; // Up arrow } } }
44. Flippy arrows!
45. $('.js-list-toggle').click(function() { $(this).toggleClass('list-open'); }); .list-toggle { position: relative; &:after { content: '\25bc'; // Down arrow position: absolute; right: 0.5em; transition: transform 0.5s ease; &.list-open { &:after { transform: rotateX(180deg); } } }
46. Use the adjacent-sibling selector to grab the list
47. h2 + p { [ . . . ] } <section> <h2>I’m a heading!</h2> <p>I’m selected!</p> <p>...but I’m not. :(</p> </section> Adjacent sibling selector (+)
48. .list-toggle { [ . . . ] & + ul { max-height: 0; transition: max-height 0.5s ease; } [ . . . ] &.list-open + ul { max-height: 100vh; } }
49. Put it in a mixin
50. @mixin accordion { position: relative; &:after { content: '\25bc'; position: absolute; right: 0.5em; transition: transform 0.5s ease; } & + ul { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } &.list-open { &:after { transform: rotateX(180deg); } & + ul { max-height: 100vh; } } } .list-toggle { @include accordion; }
51. @mixin accordion( $duration, $easing ) { [ . . . ] &:after { [ . . . ] transition: transform $duration $easing; } & + ul { [ . . . ] transition: max-height $duration $easing; } [ . . . ] } .list-toggle { @include accordion(0.3s, ease-out); }
52. @mixin accordion( $duration: 0.5s, $easing: ease ) { [ . . . ] &:after { [ . . . ] transition: transform $duration $easing; } & + ul { [ . . . ] transition: max-height $duration $easing; } [ . . . ] } .list-toggle { @include accordion(0.3s, ease-out); }
53. Build a Better Accordion
54. Build a Better Accordion Anything
55. • Start with semantic markup • Use JS to toggle classes for silky-smooth CSS animations • Let Sass do the repetitive work for you
56. codepen.io/nickpiesco github.com/nickpiesco
57. Demo time!
58. Thanks! @nickpiesco John Linnell: tmbgareok.tumblr.com PNC Park: Minorfreak/Wikimedia Commons Weird Al Yankovic: Greg Grudt/Mathew Imaging Lawrence Welk: djworksmusic.com