JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

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 accordion-list">
       <ul>
         <li class="accordion-item swipeout">
           <a href="#" class="item-link item-content">
             <div class="item-inner">
               <div class="item-title">None-swipe item</div>
             </div>
           </a>
           <div class="accordion-item-content swipeout-content">
             <div class="card"><div class="card-content">t21</div></div>
             <div class="card"><div class="card-content">t22</div></div>
             <div class="card"><div class="card-content">t23</div></div>
             <div class="card"><div class="card-content">t24</div></div>
           </div>

           <div class="swipeout-actions-left">
             <a href="#" class="color-green alert-reply">Reply</a>
             <a href="#" class="color-blue alert-forward">Forward</a>
           </div>

         </li>
       </ul>            
     </div>

    
    
  </div>
  </div>
  </div>
</div>

JavaScript

var $$ = Dom7
var app = new Framework7( {

  root: '#app', // App root element
  name: 'Framework7', // App name
  theme: 'auto'
  } );


var viewMain = app.views.create('.view-main');

  app.on('accordionBeforeOpen', function (el, prevent) {
  debugger
  
  //e.preventDefault();
  //e.stopPropagation();
  console.log('The following element opened. is there any way to get event info?');
  console.log(el);
  prevent()
});