Details List is very useful to show the detailed content on demand.
Details List
-
Quisque iaculis, metus vitae lobortis posuere, purus elit mattis felis?
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis mi sed lorem posuere, id auctor purus mollis. Quisque iaculis, metus vitae lobortis posuere, purus elit mattis felis, at gravida leo urna sagittis lectus.
-
Suspendisse sollicitudin, lorem in luctus vulputate, dolor nibh venenatis elit?
Praesent tellus nibh, consequat a euismod ut, malesuada vel nulla. Praesent eu feugiat dui. Curabitur ac aliquam ipsum. Quisque ornare hendrerit augue, sit amet tincidunt tellus porttitor et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce aliquam nibh ligula, at ultricies nunc aliquet non.
-
<ul id="details-list" class="hawk-details-list">
<li class="hawk-details-list__item details-list-item">
<header class="hawk-details-list__header details-list-item__header">
<h3 class="simple-title simple-title--small">Quisque iaculis, metus vitae lobortis posuere, purus elit mattis felis?</h3>
<div class="details-list-item__icon-container">
<div class="details-list-item__icon icon-arrow icon-arrow--primary icon-arrow--south"></div>
</div>
</header>
<div class="hawk-details-list__content-container details-list-item__content-container">
<div class="hawk-details-list__content">
<div class="text">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis mi sed lorem posuere, id auctor purus mollis. Quisque iaculis, metus vitae lobortis posuere, purus elit mattis felis, at gravida leo urna sagittis lectus.
</p>
</div>
</div>
</div>
</li>
<!-- (...) more items -->
</ul> -
App.Components.detailsList = new Hawk.DetailsList($('#details-list'), {
// options and callbacks
});
App.Components.detailsList.run();
Properties (options)
| Name | Default value | Description |
|---|---|---|
|
autoHide
boolean
|
true
|
Indicates whether to hide all the currently displayed contents when the new one is going to be visible. |
Callbacks
| Name | Arguments | Description |
|---|---|---|
|
onShow
|
|
It is invoked when the content is going to be displayed. |
|
onHide
|
|
It is invoked when the content is going to be hidden. |
Public methods
| Name | Arguments | Description |
|---|---|---|
|
show
void
|
|
Shows the content. |
|
hide
void
|
|
Hides the content. |