"stopPropagation" helper class?

I have a-link-button within accordion item-link. When clicking the link-button, accordion item collapses/expanses. So I have to use js binded to the link-button and stopPropagation from there.

Does f7 has something like “no-propagation” helper class?

<li class"accordion-item">
<a href="router/test" class="no-propagation" ..>

Any sense then to use href on link if you don’t need router to load it?

Stop propagation will also disable accordion open/close

This is what I want to achieve:

I have two links within accordion item-link:

<li class="accordion-item">
 <div class="item-content item-link">
<div class="item-inner item-row">
    <a href="./ctn1/">Content 1</a>
    <a href="./ctn2/">Content 2</a>
 <div class="accordion-item-content">
.. load and expand the content by router "./ctn1/" or "./ctn2/"

I want to load “Content 1” by router component, when clicking the link with “./ctn1/”. The router component then should get the “content 1” and expand the accordion-item-content to view “content 1”

How should I do that? Or should I listen to “accordionOpen”-event and put by this event? But then I cannot use “content”-property of router.

use autocoplete => Dropdown With Ajax-Data logic

? autocomplete is not the same as accordion-list which can be collapsed and expanded.

There can be made two improvements for accordion list:

  1. I want to use Accordion-list like a view or “modals” where router component can be used.

  2. It is possible to put any kind of input forms within list item (for example, a input slider within item-after-element). However, using this list item in accordion list, does not work because accordion collapses/expanses on click of input slider (the same goes for a-links). Can be solved if accordion list would have additional class “click-on-arrow”. A arrow is shown at the right side of accordion list item and if user clicks on the arrow, accordion list item expands/collapses. With this any kind of controlls can be put into accordion list item without interfering with accordion action.

This is not a problem for me, becaue I can trigger open/close by events.
The only problem is, how do I load a f7-“component” after I triggered the “open”-collapse event by a href?

For example, user clicks "href=“router/mycomp” within accordion-title. F7 router routes to “mycomp” which opens the accordion and loads the content within the accordion-content.

Actually, I can only use “modals and views” with f7-components but not the “view” inside a accordion item.

I want to use accordion, because user should be able to toggle and view the contens without page transition. So user sees content of collapsable of 1 and of 2 within the same page. But the “content” should be loaded by routers component. How can I do that?