CodePen Freebie – A simple, editable accordion caret icon built in CSS

  • A simple, minimal accordion caret icon built in CSS that is easy to edit into a variety of styles.

  • Uses CSS transitions to smoothly animate on style/state changes.

  • Leverages SCSS variables and operators to properly position the ^ no matter what values are input (within certain limits).

  • A bit of javascript (with JQuery for rapid prototyping) is used to open/close the drawer. The bulk of the javascript is used to take slider input and update the styles on the fly.

  • Developed and Design by Mobomo’s Chris Wachtman.

[codepen_embed height=300 theme_id=1 slug_hash=’BNaeeE’ user=’Mobomo LLC’ default_tab=’result’ animations=’run’]

See: CSS Architecture: A Recommended Strategy To Put Into Practice