<expandable-content>

application.template.hbs

<expandable-content>
  <p>Lorem ipsum dolor sit amet, eu reque aperiam vix. Vel cu albucius cotidieque, ut mel admodum vivendo. Paulo populo vivendo vix in, vix malorum dignissim et, te simul libris persecuti sea. Ut conceptam consectetuer vel, civibus patrioque per no, no habemus commune argumentum vim. Ius in etiam choro iuvaret, pro accusata periculis dissentiunt ea. Pri te nobis phaedrum, in nihil molestie pro.</p>

  <p>Novum efficiendi eu ius. Mea id fuisset verterem, eu eum ipsum democritum. Suas ullum pro ut, mei ex elit explicari. Te vero delicata mea. Graeci discere pro ex, illum habemus vivendum est et. Iisque aperiri ea mel. Eu malis dolorem usu.</p>

  <p>Ut eos eloquentiam definitionem, ad quem libris bonorum ius. Explicari consequat ex duo, dolores honestatis eu pro, dictas persius mel eu. Vidit graece quaeque ut vel, qui magna dolorum ne, pro volumus expetenda cu. Et sed quaeque accumsan, cum ei alienum accusamus.</p>

  <p>Dicta saperet perfecto usu cu. Assueverit dissentias no eum. Nec ex duis tempor, mea posse forensibus ei. Ei prima docendi postulant sed. Cu unum modus his, nonumes denique propriae ei vis. Eos probo doming ex.</p>

  <p>Ne utroque fabellas liberavisse vim, in invidunt delicata repudiandae has. Dictas ancillae nam ex, facete explicari interpretaris vim ei, in quo animal scaevola recteque. Meis explicari in mea. Stet postea perpetua an usu. Vix eu tation aliquip detraxit, quaeque definiebas pro an, pri an eius legere apeirian. Audiam persius reprimique ei usu, quo ei vide scaevola evertitur, dicta delenit fabellas et eam.</p>
</expandable-content>

expandable-content.component.js

import Ember from 'ember';

export default Ember.GlimmerComponent.extend({
  isExpanded: false,

  click() {
    this.toggleProperty('isExpanded');
  }
});

expandable-content.template.hbs

<expandable-content class="{{if isExpanded 'expanded'}}">
  {{yield}}

  <button class="prompt">
    {{#if isExpanded}}
      Show Less...
    {{else}}
      Show More...
    {{/if}}
  </button>
</expandable-content>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

::-moz-selection { background-color: transparent; }
::selection      { background-color: transparent; }

expandable-content {
  display: block;
  position: relative;
  height: 200px;
  padding: 0px 16px 40px;
  background-color: #fafafa;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  overflow: hidden;
}

expandable-content .prompt {
  display: block;
  position: absolute;
  padding: 0;
  margin: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  border: none;
  text-align: center;
  background-color: #dedede;
  box-shadow: 0px -20px 25px 10px rgba(222,222,222,1);
}

expandable-content.expanded {
  height: auto;
}

expandable-content.expanded .prompt {
  box-shadow: none;
  background-color: transparent;
}

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "hax": "https://cdn.rawgit.com/chancancode/5b7b95b6268d51cdcaae/raw/92e0654083305c73cd601381a6cea705be9f8890/hax.js",
    "ember": "http://builds.emberjs.com/canary/ember.debug.js",
    "ember-template-compiler": "http://builds.emberjs.com/canary/ember-template-compiler.js"
  }
}