Merchants Heart CSS - Panel Expander

More... button at end

by Ben Clayton

HTML

<div class="expander">
    <input id="unique-0" class="expand-control" type="checkbox" />
    <label class="expand-label" for="unique-0">I</label>
    <div class="expand-panel">
     Lucky Club<br/>
     10 Harley Street<br/>
     South Park<br/>
     London<br/>
    </div>
    
  </div>
  
  
  <div class="expander">
    <input id="unique-1" class="expand-control" type="checkbox" />
    <label class="expand-label" for="unique-1">I</label>
    <div class="expand-panel">
     Drink Club<br/>
     123 Barley Street<br/>
     South Croydon<br/>
     SE London<br/>
    </div>
    
  </div>


<!-- 'unique-0'  and 'unique-1' names will have to be generated , typically use handlebars index "unique-{{@index}}"-->

CSS

/* Structural CSS */

.expander {
  width:90%;
  border: 1px solid gray;
  padding: 4px;
  margin-bottom: 20px;
  position: relative;
}


.expander .expand-panel {
  max-height:20px;/* use display:none for snap open/close */
  transition: max-height 1s ease-in-out;
  margin-top: 10px;
  margin-bottom:4px;
  padding: 0px;
  overflow:hidden;
}

.expander .expand-control:checked~.expand-panel {
  max-height: 1000px;
}


.expander .expand-control,
.expander .expand-label {
  float: right;
  cursor: pointer;
  margin-top:10px;
  margin-right:10px;
}

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

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


.expander input[type='checkbox'].expand-control:checked~label {
  transform: rotate(90deg);
}