I am trying to create a page with a specific user experience. Please refer to the image below:
Item 1 and Item 2 are
accordion-items, and in their
accordion-item-content are radio button options as list items. The
list is stylized as a
media-list. Each radio button under the level 1 list items are independent of radio buttons in other groups.
Because these are accordion items, it is possible to collapse them so the radio buttons are hidden. Is there a way to prevent accordion list items from closing? If they close, I am worried it will make for an unpleasant user experience.
I understand there is an event
accordion:close that fires when an attempt is made to collapse the item. When I trap that event, I see that the event has a field called
cancellable which is set to
true. However, I see no
cancel method, and calling
preventDefault() on it doesn’t appear to have any effect in preventing the close event from following through. Is it possible to capture this event and use it to cancel the closing of the item so it will always stay open?
Or is there an entirely different component that I am supposed to use? (If it helps at all, I am using Framework7-Vue.)