Accordion List

demo
22

Hi Mark!

i’ve done, hope you like it!

anyone knows, using the same logic, create a sideMenu?
I say, without the use of libraries such as the angular ui bootstrap

See the Pen Ionic Accordion List with Static Elements by Daniel R. (@drr) on CodePen.

1 Like
23

Hi Daniel

Excellent thanks very much, I ended up using a slightly different method but that works great so will use it.

Thanks Mark

24

BTW, I think its alot more efficient to wrap the child list in an ng-if container, rather than having an ng-show for each ng-repeat item…

like the following

<div ng-repeat="group in groups">
              <ion-item ng-click="toggleGroup(group)"
                        ng-class="{active: group.isShown}"
                        class="item-accordion item-accordion-group" >
                  <div class="item-icon-left">
                      <i class="icon" ng-class="group.isShown ? ion-minus : ion-plus"></i>
                      <p ng-bind="::group.name"></p>
                  </div>
              </ion-item>
              <div ng-if="group.isShown">
                  <ion-item class="item-accordion item-accordion-child"
                      ng-repeat="child in ::group.children">
                      <p ng-bind="child.name"></p>
                  </ion-item>
              </div>
          </div>

toggleGroup would then set the isShown var to true/false

2 Likes
25

Is there a way to keep the first accordion open on page load?

1 Like
26

I have tried to set the first group always open on page load but with no luck. Could you please provide some help on this.

27

just set it’s isShown property to true in the controller :wink:

28

Someone has got recursive implementation for that? I am trying it based on http://plnkr.co/edit/AhdbAh?p=preview by replacing bootstrap components for ionics , but I am pretty new on angular and ionic, and dont get work fine

Any suggestion?? Thanks

29

Awesome! I been looking for something just like this! How many nested levels can you have? Can you go three or four levels deep?

31

Hey @bernardo, just wondered if you managed to get the transition animations to work with buttons and not just the text?

32

Yes we did.

Here’s what we used:

<ion-item class="item-accordion">
      <a class="button button-icon icon ion-ios-minus"></a>
      <span class="multiplier">text</span>
      <a class="button-custom button button-icon icon ion-ios-plus></a>
      <span class="item-note multiplier-total">text</span>
  </ion-item>

Hope it helps.

33

just a heads up, if you are using the accordion for really large blocks of code… you will need to update the scroll view with $ionicScrollDelegate.resize();

////////////////////////////////////////
// accordion
////////////////////////////////////////
$scope.toggleGroup = function(group) {
  if ($scope.isGroupShown(group)) {
    $scope.shownGroup = null;
  } else {
    $scope.shownGroup = group;
  }
  $ionicScrollDelegate.resize();
}

$scope.isGroupShown = function(group) {
  return $scope.shownGroup === group;
}
1 Like
34

Hi guys im trying to implement this need some help frowning what i want is when i press the group 1 only the group 1 in that question category is expanded instead of all the group frowning i couldnt brain it…

35

I was in trouble because of the resize it was not done automatic and managed to solve using their solution entering the $ ionicScrollDelegate.resize (); Thank you so much.

The problem I have now is that when you resize the accordion is not in the position where there was the click, give me a light on how to solve this?

36

Hi guys is there a way to have a child inside other child?
something like:

-Group
-child1
child2
child2
-child1
child2
child2
+Group
+Group

37

Im new to js very new to the ionic world so i’m struggling with getting this to work with my json.

I don’t need a list of items under each question. Just one answer. Here is the json. Can someone help me get this working inside of an accordion. I rather not use jquery.

[ { “name”: “Question goes here”, “answer”: “answer goes here” }, { “name”: “Question goes here 2”, “answer”: “answer goes here 2” } ]

38

Guys, I figured it out. I just had to remove the ng-repeat for items.

Thanks. Great little piece of code.

I also think you should keep certain things out of the framework. make it nice, lean and clean because phones can’t handle too much js.

39

Hi, I created a list with accordion behavior (explandible list) but when the group have more than 20 items it does not display all the items. Could you give me any advice or idea tu resolve it? Thanks in advance.

Here my code:

<ion-list>
      <div ng-repeat="album in albums">
        <ion-item class="item-stable"
                  ng-click="actions.toggleGroup(album)"
                  ng-class="{active: actions.isGroupShown(album)}">
          <i class="icon" ng-class="actions.isGroupShown(album) ? 'ion-minus' : 'ion-plus'"></i>
          &nbsp;
          {{ album.album }} ({{ album.songs.length }} songs)
        </ion-item>
        <div ng-if="actions.isGroupShown(album)">

          <ion-item class="item-accordion"
                    ng-repeat="song in album.songs"
                    ng-click="actions.showSong(artist, song)">

            {{ song }}

          </ion-item>
        </div>
      </div>
    </ion-list>
40

Hi, I am creating an app with this accordion list, and I would like to have more expandable child items inside the first items. I haven’t been able to get my child items to work as needed, so could anybody help with me on this one. I don’t have much experience with ionic. Thanks in advance.

41

Hi guys. Awesome work. TY!
Is there any way to use gourpBy filter in this? I want to have events grouped by date. So all events shall be the childs of the accordion with the same date.

Like this:
-accordion:Date 1.1.2015
detail
detail2
-accordion: Date 30.12.2014
…
-accordion: Date 25.12.2014
…

p.s. the behaviour, that one is opened at a time shall remain.

42

I want to create dynamic accordion. Some item will be list, check box,radio button, may be input field. accordion title will be dynamic.

How can i do id?

Please help me…