# Ion-option-button in list, toggle by icon click instead of swipe? **URL:** \ **Category:** uncategorized\ **Created:** [September 15, 2014, 2:48pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703 "2014-09-15T14:48:55Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [September 15, 2014, 2:48pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/1 "2014-09-15T14:48:55Z")
Hey all, I have a similair list with option buttons as in the example on [http://ionicframework.com/docs/api/directive/ionList/](http://ionicframework.com/docs/api/directive/ionList/) I would want to not only trigger the option buttons on swipe, but also on click of a part of the list item, for example an list-item-icon šŸ˜‰ Anyone has a good idea on this? I found some methods in the [http://ionicframework.com/docs/api/service/$ionicListDelegate/](http://ionicframework.com/docs/api/service/%24ionicListDelegate/) but instead of the closeOptionButtons() i would want a showOptionsButtons on the icon for example šŸ˜‰ Of course, only the option buttons should be shown for a given item. If the $ionicListDelegate would have a showOptionsButtons(index) method with an index to fix this in a less useful way, that would be fine for me šŸ˜‰ A directive to toggle the options buttons for a given list item would be even more awesome šŸ˜„ I would opt for this as a default ionic option in the framework of course, that would be te best haha. Thanks in advacne! ---
**Author:** ![devqon1](https://avatars.discourse-cdn.com/v4/letter/d/f17d59/32.png) [@devqon1](https://forum.ionicframework.com/u/devqon1)\ **Post date:** [November 24, 2014, 11:01am UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/2 "2014-11-24T11:01:07Z")
Did you find any method to do this:? ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [November 24, 2014, 11:44am UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/3 "2014-11-24T11:44:32Z")
Not yet, Iā€™m still waiting for anyone to come up with itā€¦ Havenā€™t figured it out either. ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 28, 2014, 12:52pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/4 "2014-11-28T12:52:22Z")
I would need a functionality like this as well! I guess you guys didnā€™t find a solution yet, have you? ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [November 28, 2014, 8:13pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/5 "2014-11-28T20:13:50Z")
Nopes ā˜¹ @mhartington seems like many people need this, any idea on how to accomplish this? ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 28, 2014, 8:42pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/6 "2014-11-28T20:42:15Z")
I created a custom directive (clickForOptions) which can be set as an attribute to the ion-item. Perhaps not the cleanest way but itā€™s working ;). (Note: The item itself should not have any ng-click or href attribute anymore) > **[Click to show option buttons](https://codepen.io/flavordaaave/pen/PwqMmy)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: Nightly\](http://codepen.io/ionic/pen/JsHjf/).... ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 28, 2014, 8:56pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/7 "2014-11-28T20:56:33Z")
And if you donā€™t want the swipe to reveal the option buttons anymore, just add ā€œcan-swipe=ā€œfalseā€ā€ to the list. ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [November 29, 2014, 12:05am UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/8 "2014-11-29T00:05:31Z")
Thats pretty cool! Instead, I would want to have an icon on the right side of the item with the menu ionicon, which gives the user an idea that there are options beneath the button, when clicking the button, the options are shown. This would enable a click action on the item as well, which is really necessary in my projectā€¦ Any chance this could be (easily) implemented with your directive @flavordaaave? ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 29, 2014, 1:25pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/9 "2014-11-29T13:25:00Z")
Yes, should work as well if you append this attribute to the button and then in the directive get the element and the option buttons with the parent() selector. Iā€™ve created a rough codepen here: > **[Click to show option buttons (with button)](https://codepen.io/flavordaaave/pen/MYaWBx)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: Nightly\](http://codepen.io/ionic/pen/JsHjf/).... ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 29, 2014, 1:27pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/10 "2014-11-29T13:27:02Z")
But it seems that the ionic item has some problems with an item that has this button on the right side and the option buttons. Perhaps it would be better to put a custom button inside the content of the item instead of using the ionic item with button on the right side. ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [November 29, 2014, 4:31pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/11 "2014-11-29T16:31:59Z")
I updated the codepen (see above) with something that works better šŸ˜‰ ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [December 3, 2014, 9:02am UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/12 "2014-12-03T09:02:52Z")
The only Thing thatā€™s still missing, is that ng-click on the item now still triggers when you ā€œjustā€ click/tap the button, could we prevent this from bubbling? See what I mean here, when you click on the ā€œphoneā€ icon, it still executes the alert of the item ng-click. > **[Click to show option buttons (with button)](https://codepen.io/anon/pen/EaVpPG)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: Nightly\](http://codepen.io/ionic/pen/JsHjf/). Forked from \[FlavorD... ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [December 3, 2014, 2:53pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/13 "2014-12-03T14:53:18Z")
@iwantwin good point! You could use the stopPropagation() method. Unfortunately this doesnā€™t seem to work when binding the ā€˜tapā€™ event with $ionicGesture. But if you bind the standard ā€˜clickā€™ event to the button element, the stopPropagation() works perfectly. See the codepen example below: > **[Click to show option buttons (with button)](https://codepen.io/flavordaaave/pen/QwjZjb)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: Nightly\](http://codepen.io/ionic/pen/JsHjf/). Forked from \[FlavorD... ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [December 3, 2014, 3:11pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/14 "2014-12-03T15:11:10Z")
You just made my day šŸ™‚ Exactly as I intended to have it work! This should be included into ionic frameworkā€¦ Itā€™s really an addition to the already great functionallity! Iā€™m way to inexperienced with writing directivesā€¦ Gotta practice on that ā˜¹ Thanks @flavordaaave! ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [December 3, 2014, 3:33pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/16 "2014-12-03T15:33:11Z")
One more problemā€¦ When opening with the button, the item stays open. If you swipe the item to open the option buttons, the previous item is closed. Question: - The items opened with the button, should close all previously opened items. (I could do this myself) - Toggling the button should close any item that was opened with the swipe opening for the option buttons (No clue how to interact with this existing directive) - Swiping an items hould close any items that were opened with the button (No clue how to interact with this existing directive) Could you do this or send me to some resource explaining how to do this? Not only would it be very nice, it would increase my understanding of directive development as well šŸ˜„ ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [December 3, 2014, 3:41pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/17 "2014-12-03T15:41:57Z")
@iwantwin thatā€™s a problem Iā€™m still working on with my on project. Iā€™ll keep you updated. ---
**Author:** ![flavordaaave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/flavordaaave/32/7301_2.png) [@flavordaaave](https://forum.ionicframework.com/u/flavordaaave)\ **Post date:** [December 11, 2014, 9:24pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/18 "2014-12-11T21:24:26Z")
@iwantwin Sorry for not replying earlier, but I had to solve other problems with my app first šŸ˜‰ Iā€™ve build a rough example how this could be done using a parent directive that broadcasts an event to all the items to close when one is clicked: > **[Click to show option buttons with parentController](https://codepen.io/flavordaaave/pen/emZdwN)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[List: Nightly\](http://codepen.io/ionic/pen/JsHjf/).... Itā€™s working so for now you could adapt my solution but it seems pretty wrong and overcomplicated which is why I created a question on [stackoverflow](http://stackoverflow.com/questions/27432386/one-directive-used-several-times-how-to-change-an-attribute-of-all-these-direct) to get some help. ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [December 11, 2014, 10:02pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/19 "2014-12-11T22:02:27Z")
Aww dave, youā€™re awesome for coming back at this! No problem for the waitā€¦ It was already working perfectly, functionally it was perfect, this is ā€œjustā€ a nice finishing touch, (which is pretty important for user experience, but functionality is just more important ;)) Thanks for sharing this! Itā€™s great! ---
**Author:** ![tcorey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tcorey/32/64425_2.png) [@tcorey](https://forum.ionicframework.com/u/tcorey)\ **Post date:** [January 7, 2015, 4:57pm UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/20 "2015-01-07T16:57:11Z")
Dave, thanks for the great work. I hate to bug you one more time on this topic, but do you know of a way to close the open options when a user swipes on an item? For instance, if I click on an item now and then click on a second, the first options list closes. However, if I click on an item and then swipe on another, the first options list stays open. ---
**Author:** ![jariwalabhavesh](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jariwalabhavesh](https://forum.ionicframework.com/u/jariwalabhavesh)\ **Post date:** [February 14, 2015, 6:46am UTC](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703/21 "2015-02-14T06:46:00Z")
@flavordaaave Thanks for your solution to open the option buttons using tap I am developing application using ionic on windows phone 8. First issue that i face was scrolling, i was unable to scroll ion-list. I fixed it by putting overflow-scroll=ā€œtrueā€ attribute in ā€œion-contentā€ tag, and list started to scroll. There is ion-list in ā€œion-contentā€ and each item has option buttons(need to be show on swipe). By fixing my scrolling issue i am not able to swipe list item. list-item is not swiping. but when i remove overflow-scroll=ā€œtrueā€ from ā€œion-contentā€ tag, then swipe start working for list item but scrolling stop working I am not facing any difficulty like this in android and ios, in both scroll and swipe is working fine, But not working in windows phone 8 For this i use your solution and now it working for [me.so](http://me.so) scroll as well as on swipe i am showing the option button. But after use this solution my scrolling of ion-list is too slow down and sticky. It was working fine before. have you any idea why this happens. here i had my topic [Topic that i raised day before for that content code](http://forum.ionicframework.com/t/swipe-on-item-list-is-not-working-not-showing-option-button/17573) Thanks in advance [Next page](https://forum.ionicframework.com/t/ion-option-button-in-list-toggle-by-icon-click-instead-of-swipe/9703.md?page=2)