Expanding Table Rows

Expanding Table Rows without jQuery

HTML

<script src="https://savant.inversoft.org/org/inversoft/prime/prime.js/0.34.13/prime-min-0.34.13.js"></script>
<table class="outer">
  <tr>
    <td>Outer row 1</td>
    <td>baz</td>
  </tr>
  <tr>
    <td colspan="2" class="container">  
      <div id="expanding">
        <table class="inner">
          <tr>
            <td>inner row 1</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>inner row 2</td>
            <td>bar</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

<table class="outer1">
  <tr>
    <td>Outer row 1</td>
    <td>baz</td>
  </tr>
  <tr>
    <td colspan="2" class="container">  
      <div id="expanding">
        <table class="inner1">
          <tr>
            <td>inner row 1</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>inner row 2</td>
            <td>bar</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

CSS

.outer td {
  border: 1px solid black;
}

.inner td {
  border: 1px solid red;
}

#expanding {
  overflow: hidden;
  height: 0;
  -webkit-transition: height 0.8s;
	-moz-transition: height 0.8s;
	transition: height 0.8s;
}

JavaScript

var expanding = Prime.Document.queryByID('expanding').addEventListener('transitionend', function() {
alert('hide');
}, this);
var containerRow = Prime.Document.queryFirst('td.container');

var outerRow = Prime.Document.queryFirst('.outer tr').addEventListener('click', function() {

  
  if (expanding.getHeight() === 0) {
     containerRow.show();
    //containerRow.setHeight(expanding.getHeight());
      expanding.setStyle('height', '100%');  
  } else {
      expanding.setStyle('height', '0');
        //containerRow.setHeight(0);

  }

}, this);