Flexbox Hide Overflow Child Elements Pt2

flexbox-hide-overflow-child-elements-pt2.markdown

Flexbox Hide Overflow Child Elements Pt2

Hiding overflow child flexbox items

based on for overflow: https://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow

and for toggleText https://stackoverflow.com/questions/5584010/jquery-toggle-html-text

A Pen by Vincent Tang on CodePen.

License.

index.pug

section
  p There are 13 boxes here, 3 of them are hidden using `overflow: hidden` and max-height
  p Show more/Show less button only appears on element overflow
radio
.wrapper
  .grid-parent
    - for (var x = 0; x < 13; x++)
      .grid-item
    .btn-expand Show More

script.js

// Overflow boolean checker
function isOverflown(element){
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

// Jquery Toggle Text Plugin
$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

// Init
$(document).ready(function() {
  const parent = document.querySelector('.grid-parent');
  // Show if overflowed
  if(isOverflown(parent)){
    $(".btn-expand").addClass("btn-show");
  }
  // Toggle Overflow
  $(".btn-expand").on("click",function(){
    $(".grid-parent").toggleClass("grid-parent--showall")
    $(".btn-expand").toggleText("Show More", "Show Less");
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

body {
  background-color: #EEF0ED;
}
.grid-parent2,
.grid-parent {
  width: 500px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 200px;
  // height: 200px;
  position: relative;
  &--showall{
    // height: auto;
    max-height: none;
    // overflow: none; // Not necessary
  }
}
.grid-item{
  background-color: blue;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid red;
  &:nth-of-type(even){
    background-color: lightblue;
  }
}
.btn-expand {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding: 3px;
  background-color: red;
  color: white;
}
.btn-show {
  display: block;
}