Prevent Accordion Item from collapsing

Questions
1

I am trying to create a page with a specific user experience. Please refer to the image below:

framework7-keepopen-accordion-items
framework7-keepopen-accordion-items.png423×641 5.15 KB

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.)

2

There is no way to prevent it. But if you need to prevent accordion from closing maybe you don’t need accordion.

Anyway, i believe you can just call app.accordion.open(...) on item’s accordion:close event handler to prevent it from closing

3

Thanks @nolimits4web.

You are probably right, maybe I don’t need an accordion item. Is there another item I can use that accomplishes what is shown in the picture above? I suppose I can just use regular list items, but stylize the “children” differently - however, I like the out-of-the-box look and feel offered by list items within accordion items, such as the grey horizontal divider.

I was able to get your suggestion to work by calling open within the close event handler:

		Dom7('.accordion-item').on('accordion:close', function(el) {
			app.accordion.open(el.target);
		});

This achieves exactly what I was hoping, using accordion items.