patternfly/tests/pages/_includes/widgets/list-view/list-view-standard-rows-simple-expansion.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

<div class="list-group list-view-pf list-view-pf-view">
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight9" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-plane list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event One
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart1" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight10" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-magic list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event Two
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>11</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart2" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight11" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event Three
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart3" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight12" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-linux list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event Four
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart4" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight13" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event Five
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart5" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight14" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-coffee list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading">
              Event Six
            </div>
            <div class="list-group-item-text">
              The following snippet of text is <a href="#">rendered as link text</a>.
            </div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-screen"></span>
              <strong>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          {% include widgets/charts/donut-utilization.html id="utilizationDonutChart6" %}
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Row Checkbox Selection
    $("input[type='checkbox']").change(function (e) {
      if ($(this).is(":checked")) {
        $(this).closest('.list-group-item').addClass("active");
      } else {
        $(this).closest('.list-group-item').removeClass("active");
      }
    });
    // toggle dropdown menu
    $('.list-view-pf-actions').on('show.bs.dropdown', function () {
      var $this = $(this);
      var $dropdown = $this.find('.dropdown');
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
      $dropdown.toggleClass('dropup', space < 10);
    });

    // click the list-view heading then expand a row
    $(".list-group-item-header").click(function(event){
      if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
        $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
          .end().parent().toggleClass("list-view-pf-expand-active")
            .find(".list-group-item-container").toggleClass("hidden");
      } else {
      }
    })

    // click the close button, hide the expand row and remove the active status
    $(".list-group-item-container .close").on("click", function (){
      $(this).parent().addClass("hidden")
        .parent().removeClass("list-view-pf-expand-active")
          .find(".fa-angle-right").removeClass("fa-angle-down");
    })

  });
</script>