Mobile web sites have a strong need for content which collapses to form its own table of contents. This is now very easy with the accordion-app, which shows any kind of content-block or app inside its inner content.
Quick Demo
Here's an example showing such an accordion with a gallery-app inside it. You can see it live here.
You can also find many examples of such accordions as we use them in many projects, like the IPG Group, which has extensive content which many users may wish to skip before diving into the details.
Accordions = Great UX
It's important to understand the benefit of this UX - an accordion feels like a TOC (Table of Contents) mixed with the content itself, a very powerful concept.
This is especially usefull in mobile scenarios, pages with long content and more.
To make the User-eXperience even better, we implemented it so multiple sections can be open. This is great, because opening a section further below doesn't close the above section - which would make everything slide out of the screen.
What this App Does out of the Box
- + / - icons show open/closed, but it's all CSS, you could also use up-down icons or whatever you want
- Each block has an icon (Glyphicons) but this is all just a razor template and easy to modify if you don't want the icon or if you want to go for Font-Awesome, Icomoon or whatever.
- Each block can be opened by default, but most commonly it will be closed at first
- Inside each area is an inner-content area where you can add as many content-blocks or apps as you wish, making it extremely flexible
- The entire setup uses jQuery and Bootstrap, but if you are using another CSS-framework it's easy to adjust the CSS classes in the template.
- Collapsing behavior is optimized - each section is opened/closed by the user. Opening a new section doesn't close the other sections. This makes it very user-friendly, especially on mobile devices.
Download & Marry Christmas
All Open-Source. You can find the app in the catalog and on github.
...and love from Switzerland
Daniel & the 2sic team