JSFiddle - React, Tailwind, and code Playground

by toshimaru

HTML

<div class="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour on-sale" data-discount="299">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>        
    </li>
    <li class="europe tour on-sale" data-discount="176">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
    </li>
    <li class="asia tour" data-discount="349">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
    </li>
  </ul>
  <ul id="filters">
    <li><button class="show">show price</button></li>
  </ul>
</div>

JavaScript

$('.details').hide();

$('.tours').on('show.price', function() {
    $('.details').show();
});

$('.show').on('click', function(e) {
    e.preventDefault();
    $('.tours').trigger('show.price');
});