Grid/Table Icon switch

by Alexandru Gatea

HTML

<button class="toggle-view-mode" data-tooltip="View as List">
  <span class="icon-container">
    <span></span> <span></span><span></span>
    <span></span><span></span><span></span>
    <span></span> <span></span><span></span>
  </span>
</button>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$bg: #c62828;
$color: #f5f5f5;
body {
  background: #111;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  padding: 50px;
}

.toggle-view-mode {
  background: $bg;
  border: 1px solid darken($bg, 10%);
  color: $color;
  outline: none;
  cursor: pointer;
  transition: all 0.45s ease;
  width: 38px;
  height: 38px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  display: flex;
  &:hover {
    background: darken($bg, 5%);
    box-shadow: 0px 0px 0px 4px rgba($bg, 0.3);
  }
  &:hover {
    .icon-container {
      transform: scale(1.5);
    }
  }
  &:focus,
  &:active {
    background: darken($bg, 10%);
  }
  .icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    position: relative;
    width: 14px;
    height: 14px;
    background: transparent;
    transition: all 0.25s ease-in;
    span {
      display: block;
      width: 4px;
      height: 4px;
      margin-right: 1px;
      background: $color;
      box-sizing: content-box;
      transition: all 0.25s ease-out;
      &:nth-child(3n + 3) {
        margin-right: 0;
      }
    }
  }
  &.switched {
    .icon-container {
      span {
        margin-right: 0;
        &:not(:nth-child(1)):not(:nth-child(4)):not(:nth-child(7)) {
          width: 0px;
          opacity: 0;
        }
        &:nth-child(1) {
          width: 11px;
        }
        &:nth-child(4) {
          width: 14px;
        }
        &:nth-child(7) {
          width: 8px;
        }
      }
    }
  }
}

@media(min-width:768px) {
  [data-tooltip] {
    position: relative;
    &:before,
    &:after {
      left: calc(100% + 40px);
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s ease;
      position: absolute;
      z-index: 1000;
    }
    &:after {
      content:...

JavaScript

$(document).on('click', '.toggle-view-mode', function() {

      if ($(this).hasClass('switched')) {
        $(this).removeClass('switched').attr('data-tooltip', 'View as List');

      } else {
        $(this).addClass('switched').attr('data-tooltip', 'View as Grid');
      }
    });