jQuery, SCSS, HTML example

index.html

<h1>FOOD CATEGORIES</h1>

<div class="Category">
    <div class="Category-header" id="category-1-header">
        <h1>Tapas</h1>
    </div>
    <div class="Category-body" id="category-1-body">
        <ul class="is-red">
            <li>Olives</li>
            <li>Pickles</li>
            <li>Chips</li>
        </ul>
    </div>
</div>

index.js

// Call this function when the document is ready
$(document).ready(function () {

  // Add a click listener to the element matching selector #category-1-header
  $('#category-1-header').click(function () {

    // Toggle the class `is-open` on the element matching selector `#category-1-body
    $('#category-1-body').toggleClass('is-open');
  });
});

site.scss

@mixin user-select($value) {
  -webkit-touch-callout: $value; /* iOS Safari */
    -webkit-user-select: $value; /* Safari */
     -khtml-user-select: $value; /* Konqueror HTML */
       -moz-user-select: $value; /* Firefox */
        -ms-user-select: $value; /* Internet Explorer/Edge */
            user-select: $value; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.Category {
  @include user-select(none);
}

.Category-header {
  padding: 10px;
  background-color: #EEE;
}
.Category-body {
  background-color: #AAA;
  overflow: hidden;
  
  height: 0px;
  transition: height 0.5s ease-in-out;

  &.is-open {
    height: 300px;
  }
}