Accordion

Accordion

Accordion

Download

the official templates

Photoshop HTML5 Hype

Download

The templates are updated regularly.

Inspiration

Icon

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.

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 Ko
  • Half-screen

    Half-screen

    480 x 670
    400 Ko
  • ¼ vertical

    ¼ vertical

    230 x 670
    200 Ko
  • ¼ horizontal

    ¼ horizontal

    480 x 325
    200 Ko
  • ⅙ horizontal

    ⅙ horizontal

    480 x 210
    200 Ko

Important


Security area used for the screen change.

To facilitate the screen change and prevent accidental opening of the new Slide Over panel in iOS 9, this area placed in full-screen format must be free from any interaction using a sliding movement of the finger on the screen. It is also recommended that any elements displayed at the bottom of the page, such as the company logo, the +WEB target and the call to action, be left static.




Learn more