CSS - Panel Expander - Auto Applying

Truncating content version

by Ben Clayton

HTML

<div class="moreexpander">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta lectus nec massa euismod vehicula. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan
  erat, ut pharetra libero molestie vitae end.
</div>


<div class="moreexpander">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta lectus nec massa euismod vehicula. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan
  erat, ut pharetra libero molestie vitae end.
</div>


<div class="moreexpander">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta lectus nec massa euismod vehicula. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan erat, ut pharetra libero molestie vitae. Sed sodales accumsan
  erat, ut pharetra libero molestie vitae end.
</div>

CSS

/* Structural CSS */

.content {
  width: 300px;
  margin: 0px auto;
}

.expander {
  border: 1px solid gray;
  padding: 4px;
  /* padding-bottom: 25px; */
  margin-bottom: 20px;
  position: relative;
}

.expander .expand-header {
  height: 23px;
}

.expander .expand-panel {
  max-height: 40px; /* Closed Height */
  /* use display:none for snap open/close */
  -webkit-transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  -moz-transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  -o-transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  margin-top: 5px;
  margin-bottom: 4px;
  padding: 0px;
  overflow: hidden;
  padding-bottom: 0px;
}

/* Cover bottom row of text with a gradient opacity fade */
.expander .expand-fade {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 20px;
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  z-index: 2;
}

.expander .expand-control:checked~.expand-panel {
  max-height: 400px;/* Max Open Height, make bigger than actual open height, but not by too much */
  padding-bottom: 20px;/* make 'less' fall below last line of text */
}

.expander .expand-control,
.expander .expand-label {
  position: absolute;
  bottom: 5px;
  right: 5px;
  cursor: pointer;
  z-index: 3;
}

/* the expand panel must be a follow sibling or child of checkbox element */

.expander .expand-control {
  display: none;
}

/* styling */

.expander input[type='checkbox'].expand-control~label:before {
  content: "...more";
  font-size: 1rem;
  line-height: 20px;
  display: block;
  background-color: #FFFFFF;
  /*...

JavaScript

$(document).ready(function() {


  $(".moreexpander").each(function(i) {

    var content = $(this).html();
    var html = '<div class="expander">' +
      '<input id="unique' + i + '" class="expand-control" type="checkbox" />' +
      '<div class="expand-panel">' +
      content +
      '</div>' +
      '<label class="expand-label" for="unique' + i + '"></label>' +
      '<div class="expand-fade"></div>' +
      '</div>';
    $(this).replaceWith(html);
  });


})