Ionic Accordion List, an elegant way to display more text

An elegant and simple way to display more text on an Ion-List using Accordions:

See the Pen Ionic Accordion Text by Ruben Casas (@infoxicator) on CodePen.0

 

Browsing through my Bank’s app I spotted the way the transaction list shows more information when clicking on it, expanding the text without loosing the nice looking items within the list. So There we go, let’s create it using Ionic:

Based on the official documentation for the Ionic accordion we can make some changes to display more text instead of a group of items by expanding the item height…

The dynamic ng-class controls the style of the element and changes the icon from right to down when activated.

The expandItem function takes the item from the ng-repeat when the user taps the screen and changes the ng-class returning the updated item and refreshing the DOM.

Finally… the css changes the height of the item and gives it a nice transition, we could make some more changes like adding elipsis, truncating the text allowing a maximum etc.

and… That’s all

CodePen: http://codepen.io/infoxicator/pen/dGqLWR

view on Github: https://github.com/infoxicator/ionic-accordion-text

One thought on “Ionic Accordion List, an elegant way to display more text

Leave a Reply