Right hand side icon in accordion List of ionic framework

ionic-v1
1

Hello all,

I have created following example to create expandable list with checkbox. I got code form this link where accordion list has been given with code. Link : http://codepen.io/ionic/pen/uJkCz

I want to do following things in my code I do not know how to do that. I am totally new for ionic framework and angular js.

  1. I want to show ‘+’ and ‘-’ icon on right hand side only.
  2. When I click on item its getting expand, It should be expand when user click on icon only.

These both things i want to do in this existing code, Please help me to do this.

my code : http://codepen.io/skpatel/pen/GJXmzm

2

It’s easy to move +/- icon to the right: http://codepen.io/anon/pen/QbVveV

This:

  <ion-item class="item-stable">

is now:

  <ion-item class="item-stable custom-list"

Plus this CSS:

.custom-list i {
    float: right;
}
3

Thanks @Gajotres for your quick reply. I know its easy but I have zero knowledge about CSS, I am doing for my sample demo application.

Why you asked me to change

<ion-item class="item-stable">

is now:

 <ion-item class="item-stable custom-list"

any reason? Please explain me.

4

I got it. thanks

What about my question 2? Do you have any idea?

5

I have added a custom class name: custom-list

This way we will only affect ion-item directive that holds this name.

.custom-list i {
    float: right;
}

This CSS will using this class name move icon to the right.

6

Thanks for your comment again. Second thing is possible which i have mentioned in my question? I should use icon button click for expand ?

7

I have done as you suggested but can you please take a look on my code pen example not the original one.

Here if I set custom-list class then checkbox also showing to the right hand side. Only icon should be shown to right hand side. What I can do?

I also tried to put custom-list in icon item as class but its not working. Please check above my code.

8

This should be it: http://codepen.io/anon/pen/ZGMyQd

9

Its worked can you please explain me hows its different than previous CSS part.

Why its working now if we assigned to <div> instead of direct to icon item.

any idea about my question #2?

10

Just to add on to this, there is also the item-icon-right class that can be added to the item and will force any icon to the right. I forked @Gajotres’s codepen and changed it to use item-icon-right: http://codepen.io/brandyshea/pen/OVoxKz

If you only want it to expand when the user clicks on the icon, you need to put the ng-click on the icon itself, not on the checkbox. Then, the problem is that the ion-checkbox directive produces a label and when an ng-click is inside of a label with an input, it doesn’t work. So I would restructure your code to use an ion-item with the item-checkbox class and an input type="checkbox":

<ion-list>
    <ion-item ng-repeat="group in groups" class="item-stable item-checkbox item-icon-right">
      <label class="checkbox">
         <input type="checkbox" ng-checked="isGroupShown(group)">
      </label>
      Group {{group.name}}
      <i class="icon" ng-click="toggleGroup(group)" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i> 
    </<ion-item>
    <ion-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">
      {{item}}
    </ion-item>
</ion-list>

Note that I added ng-checked="isGroupShown(group)" to the checkbox which will check the checkbox when the accordion group is shown. I’m not sure when you want it to be checked so you would need to tweak this.

Then add a rule so that the checkbox will not overlap the icon and you will be able to click on the icon:

.item-checkbox .checkbox{
  right: initial !important;
}

The codepen above is updated to show these changes.

2 Likes