patternfly
Version:
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.
181 lines (148 loc) • 5.28 kB
HTML
---
categories: [Widgets]
layout: page
title: List
resource: true
---
<div class="list-pf">
<div class="list-pf-item active">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-down"></span>
</div>
<div class="list-pf-content">
First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
<div class="list-pf-item" data-list="expansion">
<div class="list-pf-container">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
<button data-list="toggle">Collapse</button> First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
<div class="list-pf-item active">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-down"></span>
</div>
<div class="list-pf-content">
First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse in">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-down"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse in">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
<div class="list-pf-item">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
<div class="list-pf-item">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
</div>
<script>
$(document).ready(function() {
$('.list-pf').pfList();
});
</script>