JSFiddle - React, Tailwind, and code Playground

by PatrickHume

HTML

<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>
<div id="container">
  <div id="myTimeline">
    <ul class="timeline-events">
      <li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
      <li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
        <span class="event-label">Event Label</span>
        <span class="event-content">
          <p>Event Body...</p>
        </span>
      </li>
    </ul>
  </div>
  <!-- Timeline Event Detail View Area (optional) -->
  <div class="timeline-event-view"></div>
</div>
<button id="remove">
  Remove
</button>
<button id="add">
  Re Add
</button>
<button id="hide">
  hide Add
</button>
<button id="show">
  show Add
</button>

JavaScript

let timelinefunction;
  let timeline = null
  let defaultOpts = {
    // "bar" or "point"
    type: "bar"
  }
  $(function() {
    timeline = null;
    timelinefunction = function() {
      $("#myTimeline").Timeline(defaultOpts)
      //For demo purposes to show timeline events still work
      $("#myTimeline")
        .Timeline('reload', defaultOpts, (elm, opts, usrdata) => {
          console.log(usrdata.msg)
        }, {
          msg: 'For demo purposes to show timeline events still work'
        })
    };
    timelinefunction(); // Execute function     
    timeline = $("#container").html()
    $("#remove").click(function() {
      $('#myTimeline').Timeline('destroy')
      $('#container').empty()
    });
    $("#add").click(function() {
      $("#container").html(timeline)
      timelinefunction()
    })

    $("#hide").click(function() {
      //For demo purposes to show timeline events still work
      $('#myTimeline').Timeline('hide')
      console.log('For demo purposes to show timeline events still work')
    });
    $("#show").click(function() {
      //For demo purposes to show timeline events still work
      $('#myTimeline').Timeline('show')
      console.log('For demo purposes to show timeline events still work')
    });
  })