Accordion

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/panel.css file second from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the accordion, make sure to load @corelogic/clui/dist/js/components/panel.js.

Base Accordion

NO
YES
IF YOU'RE A DINOSAUR
YES
FOR PETER GRIFFIN
This text will not trigger the accordion
YOUR CONTENT HERE
YOUR CONTENT HERE
YOUR CONTENT HERE 
<div class="panel-group" id="accordion2">
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOneHundred">
      <div class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Flood Insurance Required</label>
          <div class="value">NO</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="field">
          <label>Car Insurance Required</label>
          <div class="value">YES</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Meteor Insurance Required</label>
          <div class="value">IF YOU'RE A DINOSAUR</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="field">
          <label>Life Insurance Required</label>
          <div class="value">YES</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="field">
          <label>Volcano Insurance Required</label>
          <div class="value">FOR PETER GRIFFIN</div>
        </div>
      </div>
    </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingTwoHundred">
      <div class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <i class="fa fa-fort-awesome"></i>
        </a>
        This text will not trigger the accordion
      </div>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingThreeHundred">
      <div class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <div class="collapsed-icon">
            <i class="fa fa-caret-right"></i>
          </div>
          <div class="expanded-icon">
            <i class="fa fa-caret-down"></i>
          </div>
           The icon will change when expanded/collapsed
        </a>
      </div>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapseFour">
    <div class="panel-heading" id="headingFourHundred">
      <div class="panel-title">
        <a class="collapsed" role="button" href="javascript:">
           Click anywhere on the row to open the accordion
        </a>
      </div>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Metatable

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/table.css, @corelogic/clui/dist/css/components/panel.css, and @corelogic/clui/dist/css/components/metatable.css files from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

Call window.clui.metatableInit() to initialize the component;

Base Metatable

Life-of-Loan Certification
NO
YES
IF YOU'RE A DINOSAUR
YES
FOR PETER GRIFFIN

Wells Fargo

Daenerys Targaryen 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Jon Snow 01/01/2016 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
YOUR CONTENT HERE
YOUR CONTENT HERE
YOUR CONTENT HERE 
<div class="panel-group metatable" id="metatable2">
  <div class="panel panel-default">
    <div class="panel-heading collapsed" id="headingZero" data-toggle="collapse" data-parent="#metatable" href="#metaItem0">
      <h2 class="panel-title">
        <i class="fa fa-fort-awesome icon"></i>
        Click anywhere in this title to activate this row
      </h2>
    </div>
    <div id="metaItem0" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            <div class="panel panel-default">
              <div class="panel-heading">
                <div class="panel-title">Life-of-Loan Certification</div>
              </div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="field">
                      <label>Flood Insurance Required</label>
                      <div class="value">NO</div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="field">
                      <label>Car Insurance Required</label>
                      <div class="value">YES</div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="field">
                      <label>Meteor Insurance Required</label>
                      <div class="value">IF YOU'RE A DINOSAUR</div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="field">
                      <label>Life Insurance Required</label>
                      <div class="value">YES</div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="field">
                      <label>Volcano Insurance Required</label>
                      <div class="value">FOR PETER GRIFFIN</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                <input type="button" class="btn btn-default" value="View More">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne" data-toggle="collapse" data-parent="#metatable" href="#metaItem1">
      <h2 class="panel-title">
          <div class="icon"><img src="https://placekitten.com/g/30/30" alt=""></div> Wells Fargo
      </h2>
    </div>
    <div id="metaItem1" class="panel-collapse collapse in">
      <div class="panel-body">
        <table class="table">
          <thead>
            <th><label>Admin Name</label></th>
            <th><label>Date</label></th>
            <th><label>Description</label></th>
            <th><label>Result</label></th>
            </thead>
            <tbody>
              <tr>
                <td>Daenerys Targaryen</td>
                <td>01/01/2016</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit amet</td>
              </tr>
              <tr>
                <td>Jon Snow</td>
                <td>01/01/2016</td>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit amet</td>
              </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" id="headingTwo" data-toggle="collapse" data-parent="#metatable" href="#metaItem2">
      <h2 class="panel-title">
        Icons and images are optional to insert
      </h2>
    </div>
    <div id="metaItem2" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" id="headingThree" data-toggle="collapse" data-parent="#metatable" href="#metaItem3">
      <h2 class="panel-title">
          <div class="collapsed-icon">
            <i class="fa fa-caret-right icon"></i>
          </div>
          <div class="expanded-icon">
            <i class="fa fa-caret-down icon"></i>
          </div>
           Click anywhere in this title to activate this row
      </h2>
    </div>
    <div id="metaItem3" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" id="headingFour" data-toggle="collapse" data-parent="#metatable" href="#metaItem4">
      <h2 class="panel-title">
          <div class="collapsed-icon">
            <i class="fa fa-caret-right icon"></i>
          </div>
          <div class="expanded-icon">
            <i class="fa fa-caret-down icon"></i>
          </div>
           This icon will change when expanded/collapsed
      </h2>
    </div>
    <div id="metaItem4" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            YOUR CONTENT HERE
          </div>
        </div>
      </div>
    </div>
  </div>
</div>