JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/js/framework7.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.css">
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges">
    <div class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
        </div>
      </div>
      <!-- Scrollable page content-->
      <div class="page-content">
      
      
      
      <div class="list accordion-list">
  <ul>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
      
      
      
      
      </div>
    </div>
  </div>
</div>

JavaScript

var $$ = Dom7
window.app = new Framework7({
  root: '#app',
  theme: 'auto',
  swipeout: {
    noFollow: true
  },
});
debugger


app.on('accordionBeforeOpen', function(el) {
  debugger
  alert('a')
  //e.preventDefault();
  //e.stopPropagation();
  console.log('The following element opened:');
  console.log(el);
  showFullBugDetails(el.id.substr(7));
  prevent; // does not seem to be working ??
});

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