1
$(document).ready(function() {
2
    var animation = false,
3
     animDur = 1000,
4
     $row = $('.box__row'),
5
     $cell = $('.box__row-cell'),
6
     $content = $('.box__content'),
7
     $closeBtn = $('.box__close');
8
  
9
    var active = function() {
10
      if (!animation) {
11
        animation = true;
12
        var cellData = $(this).data('cell');
13
        var $content = $('.box__content[data-content=' + cellData + ']');
14
  
15
        $(this).addClass('active');
16
        $content.addClass('show-content');
17
        $closeBtn.addClass('box-close-active');
18
      }
19
  
20
      setTimeout(function() {
21
        animation = false;
22
      }, animDur);
23
    }
24
  
25
    var close = function() {
26
      animation = true;
27
      $cell.removeClass('active');
28
      $content.removeClass('show-content');
29
      $(this).removeClass('box-close-active');
30
  
31
      setTimeout(function() {
32
        animation = false;
33
      }, animDur);
34
    }
35
  
36
    $row.on('click', '.box__row-cell', active);
37
    $closeBtn.on('click', close);
38
    $cell.on({
39
      mouseenter: function() {
40
        $cell.addClass('hover-cell');
41
        $(this).removeClass('hover-cell');
42
      },
43
      mouseleave: function() {
44
        $cell.removeClass('hover-cell');
45
      }
46
    });
47
  });
48