JSFiddle - React, Tailwind, and code Playground

by mmaharjan

HTML

<body> 
    <div id="drinks">
      <select id="test">
        <option data-tab="Coffee">Coffee</option>
        <option data-tab="Cold Drinks">Cold Drinks</option>
        <option data-tab="Hot Drinks">Hot Drinks</option>
      </select>
      <div class="section-wrapper">
        <section class="Coffee">
          <h3>Coffee </h3>
          <h4>Coffee Flavor</h4>
        </section>
        <section class="Cold Drinks">
          <h3>Cold Drink</h3>
          <h4>Cold Drink</h4>
        </section>
        <section class="Hot Drinks">
          <h3>Hot Drink</h3>
          <h4>Hot Drink</h4>
        </section>
      </div>
    </div>  
</body>

JavaScript

$(document).ready(function() {
  $("#test").on('load change', function() {   
    $("#test option").each(function() {     
      $("#drinks ." + $(this).val()).hide();
    })
    $("#drinks ." + $(this).val()).show();
  }).change();
});