DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Announcing the Accordion App for collapsible sections (mobile, bootstrap3)

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

  1. + / - icons show open/closed, but it's all CSS, you could also use up-down icons or whatever you want
  2. 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. 
  3. Each block can be opened by default, but most commonly it will be closed at first
  4. 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
  5. 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.
  6. 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


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (30)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (33)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (149)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (2)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (53)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (39)
Will Strohl (165)
William Severance (5)

Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out