View More - Graphical Effect

1_view_more.md

View More - Graphical Effect

To give a faded text look at the bottom of a long list, with gradient left and right borders (bottom to top) that act as a container.

.view-more and .accordion-toggle are separate divs that stack as siblings.

2_view_more.scss

.view-more { display: none; }
.accoridan-toggle { display: none; }

.expandable {
  position: relative;

  ul {
      height: 100px;
      overflow: hidden;
  }
  .view-more {
    display: block;
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 23px;
  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, black));
    background-image: -webkit-linear-gradient(top, transparent, #fafafa);
    background-image: -moz-linear-gradient(top, transparent, #fafafa);
    background-image: -ms-linear-gradient(top, transparent, #fafafa);
    background-image: -o-linear-gradient(top, transparent, #fafafa);
  
    border-width: 1px;
    border-top-width: 0;
    border-style: solid;
    -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#8C8C8C), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(bottom, #8C8C8C, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image: -moz-linear-gradient(bottom, #8C8C8C, rgba(0, 0, 0, 0)) 1 100%;
    -ms-border-image: -ms-linear-gradient(bottom, #8C8C8C, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image: -o-linear-gradient(bottom, #8C8C8C, rgba(0, 0, 0, 0)) 1 100%;
    border-image: linear-gradient(to top, #8C8C8C, rgba(0, 0, 0, 0)) 1 100%;
  }
  .accordion-toggle {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #8C8C8C;
    color: #F1F1F1;
    margin-bottom: 24px;
    padding: 1px 0px 0px 6px;
    cursor: pointer;
  }
}

3_view_more.liquid

<div id="filter-diameter" class="expandable">
  <h3>Diameter</h3>

  <ul>

<!-- List content -->

  </ul>
  
  <div class="view-more"></div>
  <div class="accordion-toggle">Expand &#x25BC;</div>
</div>