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-item
s, 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.)