JSFiddle - React, Tailwind, and code Playground

by Tobin Shields

HTML

<div class="col-md-3">
  <ul class="pc-scroller">
    <span>GO TO</span>
    <li class="pc-welcom">Welcome</li>
    <li class="pc-bebidasbeverages-114">Beverages</li>
    <li class="pc-traditional-style-breakfast-114">Traditional Breakfast</li>
    <li class="pc-mexican-style-breakfast-114">Mexican Breakfast</li>
    <li class="pc-mexican-plates-114">Mexican Plates</li>
    <li class="pc-botanasappetizers-114">Appetizers</li>
    <li class="pc-mariscosseafood-114">Seafood</li>
    <li class="pc-parrilladabarbecue-114">Barbecue</li>
    <li class="pc-kids-plates-114">Kid's Plates</li>
    <li class="pc-postresdesserts-114">Desserts</li>
  </ul>
</div>

JavaScript

// If the span is clicked
$(".pc-scroller > span").click(function() {
	// Check to see if the screen is small
  if ($(window).width() < 500) {
  	// Toggle hide/show all list items
    $(".pc-scroller > li").toggle();
  }
});

// When the screen is resized
$(window).resize(function(){
	// If the screen is small, hide all list items
	if ($(window).width() < 500) {
  	$(".pc-scroller > li").hide();
  // If the screen is larger, show all list items
  } else {
  	$(".pc-scroller > li").show();
  }
});