<!-- Begin Modal -->

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        ×
      </button>
      <h4 id="myModalLabel1">
        Application Credentials (Spoiler)
      </h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="span8">
        <p>Warning, this is a spoiler</p>
        <p>Are you sure you want to see the credentials?</p>
         <div id="creds_hidden" style="display:none">
      <table class="table table-striped table-hover table-bordered pull-left" id="data-table">
          <thead>
            <tr>
              <th>
                Email
              </th>
              <th>
                Password
              </th>
          <th>
          API Key
          </th>
            </tr>
          </thead>
          <tbody>
          <tr>
                <td style="word-wrap:break-word;">
                  admin@metacorp.com
                </td>
                <td>
                  admin1234
                </td>
            <td>
            1-01de24d75cffaa66db205278d1cf900bf087a737
            </td>
              </tr>
          <tr>
                <td style="word-wrap:break-word;">
                  jack@metacorp.com
                </td>
                <td>
                  yankeessuck
                </td>
            <td>
              2-050ddd40584978fe9e82840b8b95abb98e4786dc
            </td>
              </tr>
          <tr>
                <td style="word-wrap:break-word;">
                  jim@metacorp.com
                </td>
                <td>
                  alohaowasp
                </td>
                <td>
                  3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1
                </td>
              </tr>
          <tr>
                <td style="word-wrap:break-word;">
                  mike@metacorp.com
                </td>
                <td>
                  motocross1445
                </td>
            <td>
              4-4c809b3d11d272cff8cab1da9e4cdf61137f29d2
            </td>
              </tr>
          <tr>
                <td style="word-wrap:break-word;">
                  ken@metacorp.com
                </td>
                <td>
                  citrusblend
                </td>
            <td>
            5-4af604a848ca212cfa3935352aabe9522cf89fdc
            </td>
              </tr>

          </tbody>
        </table>
       </div>
        </div>
      </div>
      <div class="row-fluid">
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">
        Close
      </button>
    <button id="understood" class="btn btn-primary" aria-hidden="true">
        I understand
      </button>

    </div>

<!-- End Modal -->

<script type="text/javascript">

$('#understood').click(function() {
  $("#creds_hidden").show();
});


</script>