Flexbox Hide Overflow Child Elements Pt3

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

Flexbox Hide Overflow Child Elements Pt3

Hiding overflow child flexbox items Now targeting multiple elements at a time And targeting non elements as well Useful in largely condensed notetaking application and/or ecommerce shopping

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 Any grid-parent with 10 or more child items has a "SHOW MORE" button to expand
  p Click "SHOW MORE" to see the results
radio
.wrapper
  each val in [5,8,10,13,16,19]
    h3=val+" child elements"
    .grid-parent
      - for (var x = 0; x < val; 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;
};

// Toggle Overflow
function toggleOverflow(e){
  console.log(e);
  e.target.parentElement.classList.toggle("grid-parent--showall");
  $(e.target).toggleText("Show More", "Show LESS");
}

// Where stuff happens
var parents = document.querySelectorAll(".grid-parent");

parents.forEach(parent => {
  console.log(parent);
  console.log(parent.lastElementChild);
  if(isOverflown(parent)){
    parent.lastElementChild.classList.add("btn-show");
    parent.lastElementChild.addEventListener('click', toggleOverflow);
  }
})

scripts

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

style.scss

body {
  background-color: #EEF0ED;
  margin-bottom: 300px;
}
.grid-parent {
  margin: 20px;
  width: 250px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 100px;
  // height: 200px;
  position: relative;
  &--showall{
    // height: auto;
    max-height: none;
    // overflow: none; // Not necessary
  }
}
.grid-item{
  background-color: blue;
  width: 50px;
  height: 50px;
  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;
}