framework7

Open full view…

Dynamically added items to accordion

lehoo
Wed, 17 May 2017 13:00:48 GMT

Is it possible to add new item to existing accordion defined in HTML from JS level? According to docs there are only three functions in accordion JS API.

lehoo
Wed, 17 May 2017 17:01:37 GMT

To be more specific what I would like to achieve with access to accordion ... I would like to prepare a list of tasks for the whole week. Accordion would be use to represent days in a week and inside of this I would like to use swipeout elements as tasks. While being on the view with the list I would like to have floating button to add new task. This is more or less what I would like to do.

sergeantpepper
Thu, 18 May 2017 05:51:32 GMT

How about using Jquery like this: <!-- List View --> <div class="content-block-title">List View Accordion</div> <div id="myWeek" class="list-block accordion-list"> </div> strHtml = '<ul>' strHtml +='<li class="accordion-item"><a href="#" class="item-content item-link">' strHtml +='<div class="item-inner">' strHtml +='<div class="item-title">Item 1</div>' strHtml +='</div></a>' strHtml +='<div class="accordion-item-content">' strHtml +='<div class="content-block">' strHtml +='<p>Item 1 content. Lorem ipsum dolor sit amet...</p>' strHtml +='</div>' strHtml +='</div>' strHtml +='</li>' strHtml +='</ul>' $('#myWeek').html(strHtml); Obviously you can extract different elements like <li> and build your own function for dynamic content.

lehoo
Fri, 19 May 2017 08:51:13 GMT

Hi Sergeantpepper, I've tried to write similar code as you have proposed: $$('#list-item').html(createListContent()); where createListContent is used to prepare html code and it works fine. Thanks!