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?
<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:
<div class="item-content item-link">
<div class="item-inner item-row">
<a href="./ctn1/">Content 1</a>
<a href="./ctn2/">Content 2</a>
.. 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:
I want to use Accordion-list like a view or “modals” where router component can be used.
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?