Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
How do I close other opened expandable items when opening a new one?
-
Is there a callback functionality for expandable items?
The reason why I’m asking is that I want to close other ‘opened’ item when opening a new one.
-
There’s no callback functionality for expandable list items, but one way you could get this to work is to override the
showExpansion
function. Here is an example:https://codepen.io/emccorson/pen/MWwjdmE
HTML
<ons-page> <ons-list> <ons-list-item expandable> One <div class="expandable-content">Expandable content</div> </ons-list-item> <ons-list-item expandable> Two <div class="expandable-content">Expandable content</div> </ons-list-item> <ons-list-item expandable> Three <div class="expandable-content">Expandable content</div> </ons-list-item> </ons-list> </ons-page>
JS
ons.ready(() => { document.querySelectorAll('ons-list-item').forEach(listItem => { const showExpansion = listItem.showExpansion.bind(listItem); listItem.showExpansion = () => { document.querySelectorAll('ons-list-item.expanded').forEach(expandedListItem => { if (expandedListItem !== listItem) { expandedListItem.hideExpansion(); } }); showExpansion(); } }); });
-
Thank you very much.
When I tried it for the first time I found out that it does not seem to work on dynamically generated lists. So what I did was to remove the ons-ready and converted it to a function to be invoked each time a new content is generated. Now its working!