Framework7 swipeout Accordion
HTML
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<div id="app">
<div class="view view-main ios-edges">
<div class="page" data-name="home">
<!-- Scrollable page content-->
<div class="page-content">
<div class="list">
<ul>
<li class="swipeout accordion-item">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner">Link 1</div>
</a>
<div class="accordion-item-content" style="" aria-hidden="true">
<div>
<div class="list">
<ul>
<li class="swipeout">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner ml-2">
<div class="item-title">
Round 1
<div class="item-footer">
</div>
</div>
<div class="item-after">2</div>
</div>
</a>
</div>
<div class="swipeout-actions-right">
<a href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Swipeout actions left -->
<div class="swipeout-actions-right">
<!-- Swipeout actions links/buttons -->
<a href="#">Action 1</a>
</div>
</li>
</ul>
...
JavaScript
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: true,
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
var viewMain = app.views.create('.view-main');