Accordion

Accordion

Accordion

Download

the official templates

Photoshop HTML5 Hype




Inspiration

Icons

Accordion

The standard icon plus must appear on every fold to prompt the reader to touch to open it.

Note that the standard icon plus must change to an x once the tab is open, as a prompt to close it afterward.

Accordion
Note that the standard icon plus must change to an close once the interaction is triggered, as a prompt to close it afterward.

Orientations

Possible directions for this interaction: vertical, horizontal.

Notes

  • When in full-screen format, position the folds on the left.
  • Minimum width per fold is 40 px.

Supported formats

  • Full-screen

    Full-screen

    980 x 670
    500
  • Half-screen

    Half-screen

    480 x 670
    400
  • ⅓ vertical

    ⅓ vertical

    330 x 670
    300
  • ⅓ horizontal

    ⅓ horizontal

    980 x 210
    300
  • ¼ vertical

    ¼ vertical

    230 x 670
    200
  • ¼ horizontal

    ¼ horizontal

    480 x 325
    200
  • ⅙ horizontal

    ⅙ horizontal

    480 x 210
    200
  • ⅛ horizontal

    ⅛ horizontal

    480 x 152
    200
  • ⅛ vertical

    ⅛ vertical

    230 x 325
    200
  • Banner

    Banner

    980 x 70
    200