CSS - Panel Expander

Truncating content version

by Ben Clayton

HTML

<div class="content">
  <div class="expander">
    <input id="unique1" class="expand-control" type="checkbox" />


    <div class="expand-panel">
      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>
    <label class="expand-label" for="unique1"></label>
    <div class="expand-fade"></div>
  </div>
</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;
  /* 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;
}

.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;
  padding-bottom: 20px;
}

.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;
  /* border: 1px solid red; */
  text-align: center;
  cursor: pointer;
  margin-left: 5px;
  padding-left: 5px;
  padding-right: 5px;
  opacity: 0.8;
}

.expander...