JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<h2>
More Products Within This Series
<a href="#" class="toggler">
  </a>
</h2>

<div class="wrap">

  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original__f-webp/images/items/1800/HelixLT-xlarge.jpg.auto.webp"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original__f-webp/images/items/1800/HelixControl-xlarge.jpg.auto.webp"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img src="https://media.sweetwater.com/api/i/w-300__h-300__b-original/images/items/1800/Helix-xlarge.jpg"/><br>
    Super Neat0 Product
    <div class="price">
      $499.99
    </div>
  </div>
  <div class="item">
    <img...

SCSS

html, body {
  font-family: 'Aspira', sans-serif;
}

.price {
  color: rgb(200,50,50);
  font-weight: bold;
  font-size: 1.1em;
}

.wrap {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
}

.item {
  box-sizing: border-box;
  display: inline-block;
  padding: 0 30px 0px 30px;
  text-align: center;
  width: 20%;
  min-width: 20%;
}

h2 {
  font-size: 1.5em;
  padding: 1em;
  text-align: center;
}

.toggler {
  color: #4f69cc;
  text-decoration: none;
  font-size: .9rem;
  font-weight: bold;
  vertical-align: middle;
  &:before {
    content:'(Show More)'
  }
}

.toggler-toggled {
  &:before {
    content:'(Show Less)';
  }
}

.expanded {
  white-space: normal;
  overflow: auto;
  flex-wrap: wrap;
}

img {
  width: 100%;
  height: auto;
}

JavaScript

$('.toggler').on('click', function(event){
	event.preventDefault();
	$(this).parent().next().toggleClass('expanded'); $(this).toggleClass('toggler-toggled');
})