Skip to content

Commit

Permalink
Merge pull request #128 from todc/list-group-collapsible-items
Browse files Browse the repository at this point in the history 
List group collapsible items
  • Loading branch information
@acmetech
acmetech committed Dec 16, 2013
2 parents 7e37bdb + 5d2c623 commit 2c18c74
Show file tree
Hide file tree
Showing 6 changed files with 476 additions and 197 deletions.
289 changes: 225 additions & 64 deletions components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4414,46 +4414,137 @@ <h3 id="list-group-linked">Linked items</h3>

<h4 id="list-group-linked-alternate">Linked list group using list items</h4>
<p>Linkify list group items by using list items instead of anchor tags.</p>

<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The list group collapsible menu requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>

<div class="bs-callout bs-callout-warning">
<h4>Make list group collapsible menus accessible</h4>
<p>Be sure to add a <code>role="menu"</code> to every <code>list-group-item-menu</code> and <code>dropdown-menu</code> to help with accessibility.</p>
</div>

<div class="bs-example">
<ul class="list-group">
<li class="list-group-header">List header</li>
<li class="list-group-item active"><a href="#">Home</a></li>
<li class="list-group-item"><a href="#">Library</a></li>
<li class="list-group-item"><a href="#">Applications</a></li>
<li class="list-group-header">Another list header</li>
<li class="list-group-item"><a href="#">Profile</a></li>
<li class="list-group-item">
<a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#profile"></span>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#settings"></span>
<a href="#">
Settings
</a>
<a href="#">Profile</a>
</div>

<div id="profile" class="collapse">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action</a>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<div id="settings" class="list-group-collapse collapse">
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#settings"></span>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">
Settings
</a>
</div>

<div id="settings" class="collapse">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action</a>
</div>
</li>
<li class="divider"></li>
<li class="collapse-submenu">
<li class="list-group-item">
<span class="dropdown-toggle collapse-caret collapsed" data-toggle="collapse" data-target="#sub-settings"></span>
<a href="#">
Separated link
</a>
<div class="list-group-collapse collapse" id="sub-settings">
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">
Separated link
</a>
</div>

<div class="collapse" id="sub-settings">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action 1</a>
</div>
</li>
</ul>
</div>
</li>
Expand All @@ -4471,39 +4562,119 @@ <h4 id="list-group-linked-alternate">Linked list group using list items</h4>
<li class="list-group-item"><a href="#">Library</a></li>
<li class="list-group-item"><a href="#">Applications</a></li>
<li class="list-group-header">Another list header</li>
<li class="list-group-item"><a href="#">Profile</a></li>
<li class="list-group-item">
<a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#profile"></span>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#settings"></span>
<a href="#">
Settings
</a>
<a href="#">Profile</a>
</div>

<div id="profile" class="collapse">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action</a>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<div id="settings" class="list-group-collapse collapse">
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<span class="collapse-caret collapsed dropdown-toggle" data-toggle="collapse" data-target="#settings"></span>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">
Settings
</a>
</div>

<div id="settings" class="collapse">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action</a>
</div>
</li>
<li class="divider"></li>
<li class="collapse-submenu">
<li class="list-group-item">
<span class="dropdown-toggle collapse-caret collapsed" data-toggle="collapse" data-target="#sub-settings"></span>
<a href="#">
Separated link
</a>
<div class="list-group-collapse collapse" id="sub-settings">
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">
Separated link
</a>
</div>

<div class="collapse" id="sub-settings">
<ul role="menu" class="list-group-item-menu">
<li class="list-group-item">
<div class="list-group-item-wrapper">
<div class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<a href="#">Action 1</a>
</div>
</li>
</ul>
</div>
</li>
Expand All @@ -4515,16 +4686,6 @@ <h4 id="list-group-linked-alternate">Linked list group using list items</h4>
</ul>
{% endhighlight %}

<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The list group collapsible menu requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>

<div class="bs-callout bs-callout-warning">
<h4>Make list group collapsible menus accessible</h4>
<p>Be sure to add a <code>role="menu"</code> to every dropdown-menu to help with accessibility.</p>
</div>

<h3 id="list-group-custom-content">Custom content</h3>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-example">
Expand Down
Loading

0 comments on commit 2c18c74

Please sign in to comment.