JSFiddle - React, Tailwind, and code Playground

by apimenov93

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="ui main two column divided grid">
  <!-- ============= Vertical Menu ================ -->
  <aside class="ui three wide column vertical inverted menu fixed top">
    <a class="item">Menu</a>
    <a class="item">Item 1</a>
    <a class="item">Item 2</a>
    <a class="item">Item 3</a>
    <a class="item">Item 4</a>
  </aside>


  <div class="fluid thirteen wide column">
    <div class="main ui container">
      <!-- ============= Masonry Items are in here ================ -->
      <section id="masonry-grid">
        <div class="masonry-item fittedWidth">
          <div class="ui top attached buttons padded grid">
            <div data-bind="click: expander" class="ui column button groupheader center aligned">
              <i class="caret down icon"></i>
              <span> Group 1 </span>
            </div>
          </div>
          <div class="container-responsive expander hidden">
            <table class="ui compact celled unstackable table">
              <thead>
                <tr>
                  <th class="seven wide">Key</th>
                  <th class="seven wide right aligned">Value</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td> Key 1</td>
                  <td class="right aligned">Value 1</td>
                </tr>
                <tr>
                  <td> Key 2</td>
                  <td class="right aligned">Value 2</td>
                </tr>
                <tr>
                  <td>...

CSS

.hidden {
  display: none !important;
}

.container-responsive {
  display: block;
  width: 100%;
  min-height: .01%;
  table-layout: fixed;
  overflow-x: auto;
  overflow-scrolling: touch;
}


.masonry-grid {
  padding-bottom: 0.5em;
  width: 100%;
}

.masonry-item {
  width: calc((100% - 2em) / 2);
}

section {
  margin: 0 !important;
}

JavaScript

function viewModel() {
    var self = this;
    self.expander = function(group, event){
        var nextExpander = $(event.currentTarget).parent().next('.expander');
        if (nextExpander.is(':visible')){
            nextExpander.transition({
                animation: 'slide down',
                duration: 400,
                onHide: function () {
                    $('#masonry-grid').masonry('layout');        
                }
            });
        }
        else{
            nextExpander.transition('slide down', 400);
            $('#masonry-grid').masonry();
        }
    };
}

$(function() {
    ko.applyBindings(viewModel());
});

var msnryConfig = {
  transitionDuration: '0.1s',
  //transitionDuration: '0',
  itemSelector: '.masonry-item',
  columnWidth: 0,
  fitWidth: false,
  gutter: 14
};

$('#masonry-grid').masonry(msnryConfig).masonry('layout');