JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table border='0'>
  <tr>
    <th>Класс</th>
    <th>Код</th>
    <th>Город</th>
    <th>Дата создание</th>
    <th>Дата редактирование</th>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Мебель</td>
    <td>1</td>
    <td>Казань</td>
    <td>2017-03-10 10:00:00</td>
    <td>2017-03-10 10:30:00</td>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Электроника</td>
    <td>2</td>
    <td>Москва</td>
    <td>2017-03-15 09:15:00</td>
    <td>2017-03-15 10:30:00</td>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Бытовая химия</td>
    <td>3</td>
    <td>Санк-Петербург</td>
    <td>2017-03-10 10:00:00</td>
    <td>2017-03-10 10:30:00</td>
  </tr>
</table>

CSS

table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
td, th {
  padding: 0.5em;
}
.header:hover{
  cursor: pointer
}
.header .sign:after{
  content: '-'
}
.header.expand .sign:after{
  content: '+'
}

.child div {
  height: 0em;
  opacity: 0;
  transition: 0.5s;
}
.child div p {
  opacity: 0;
  transition: 0.1s;
}
.child.animate div {
  height: auto;
  opacity: 1;
}
.child.animate div p {
  opacity: 1;
}

.child p {
  word-wrap: break-word;
}

JavaScript

$('.header').click(function(){
  if ($(this).hasClass('expand')) {
    $(this).closest('table').find('.header').addClass('expand');
    $(this).closest('table').find('.child').remove();
    $(this).after('<tr class="child"><td colspan="5"><div class="content"><div class="col-xs-6"><p>Имя: Радбя</p><p>Телефон: 8955555555</p><p>email: </p><p>Пользователь: admin</p></div><div class="col-xs-6"><p>Информация: тиватитдвитваитвлтвадива</p></div><div class="col-xs-6"><p>Кол-во: 100</p><p>Приложение: нет</p><div class="col-xs-6"><p>Статус</p><p>Всего: 1000</p><p>Оплачено: 500</p></div></div></td></tr>').removeClass('expand');
    setTimeout(() => {
			$(this).parent().find('.child').addClass('animate');
    }, 0);    
  } else {
  	$(this).addClass('expand').parent().find('.child').removeClass('animate');
    setTimeout(() => {
			$(this).parent().find('.child').remove();
    }, 500);      
  }
});