Accordion

Visual

image-accordion
image-accordion

Data type

<div class='dizmo-accordion' data-type='dizmo-accordion'>
    <ul class='dizmo-accordion-panels'>

        <!-- listed panels: shown in accordion list -->
        <li class='dizmo-accordion-panel'>
            <div class='dizmo-accordion-panel-header'>
                <div class='dizmo-accordion-panel-header-content'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL 0</span>
                </div>
                <div class='dizmo-accordion-panel-header-content active'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL 0</span>
                </div>
            </div>
            <div class='dizmo-accordion-panel-body'>
                <div class='dizmo-accordion-panel-body-content'>...</div>
            </div>
        </li>
        ...
        <li class='dizmo-accordion-panel'>
            <div class='dizmo-accordion-panel-header'>
                <div class='dizmo-accordion-panel-header-content'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL 9</span>
                </div>
                <div class='dizmo-accordion-panel-header-content active'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL 9</span>
                </div>
            </div>
            <div class='dizmo-accordion-panel-body'>
                <div class='dizmo-accordion-panel-body-content'>...</div>
            </div>
        </li>

        <!-- unlisted panels: not shown in accordion list -->
        <li class='dizmo-accordion-panel unlisted'>
            <div class='dizmo-accordion-panel-header'>
                <div class='dizmo-accordion-panel-header-content active'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL A</span>
                </div>
            </div>
            <div class='dizmo-accordion-panel-body'>
                <div class='dizmo-accordion-panel-body-content'>...</div>
            </div>
        </li>
        ...
        <li class='dizmo-accordion-panel unlisted'>
            <div class='dizmo-accordion-panel-header'>
                <div class='dizmo-accordion-panel-header-content active'>
                    <span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>
                    <span class='dizmo-accordion-panel-header-text'>PANEL Z</span>
                </div>
            </div>
            <div class='dizmo-accordion-panel-body'>
                <div class='dizmo-accordion-panel-body-content'>...</div>
            </div>
        </li>
    </ul>
</div>

Styling

Example styling: the panel headers have a dimgrey top border, the panel bodies have a non-default margin of 10px, and the scrollbar has also a dimgrey border.

Further, the panel content is table-like; it has by default no styling at all, and is therefore required to be adapted according to the needs of the various contents.

div.dizmo-accordion {
ul.dizmo-accordion-panels {
  li.dizmo-accordion-panel {
    .dizmo-accordion-panel-header {
      border-top: 1px solid dimgrey; /* default: none */
    }
    .dizmo-accordion-panel-body {
      height: calc(100% - 20px - 48px);     /* alt: omit --> 100% */
      margin: 0 10px 10px;                  /*      omit --> 0    */
      width: calc(100% - 20px);             /*      omit --> 100% */
      .dizmo-accordion-panel-body-content { /*** CUSTOM CONTENT ***/
        display: table;
        div {
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          span {
            font-size: 10em;
            font-weight: bold;
          }
          p:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
.iScrollVerticalScrollbar {
  .iScrollIndicator {
    border: 1px solid dimgrey; /* default: lib-dependent */
  }
}

Constraints

Works only on div elements.

Usage

Manual initialization:

DizmoElements('#my-accordion').daccordion();

Toggle, show or hide a panel:

DizmoElements('#my-accordion').daccordion('toggle-panel', DizmoElements('#my-panel'));
DizmoElements('#my-accordion').daccordion('show-panel', DizmoElements('#my-panel'));
DizmoElements('#my-accordion').daccordion('hide-panel', DizmoElements('#my-panel'));

Insert or remove a panel at a given index:

// Insert -- construct panel from scratch: 
var $my_panel = DizmoElements("<li class='dizmo-accordion-panel unlisted'>" +
    "<div class='dizmo-accordion-panel-header'>" +
        "<div class='dizmo-accordion-panel-header-content'>" +
            "<span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>" +
            "<span class='dizmo-accordion-panel-header-text'>Panel</span>" +
        "</div>" +
        "<div class='dizmo-accordion-panel-header-content active'>" +
            "<span class='dizmo-accordion-panel-header-icon'>&nbsp;</span>" +
            "<span class='dizmo-accordion-panel-header-text'>Panel</span>" +
        "</div>" +
    "</div>" +
    "<div class='dizmo-accordion-panel-body'>" +
        "<div class='dizmo-accordion-panel-body-content'>#</div>" +
    "</div>" +
"</li>");

DizmoElements('#my-accordion').daccordion('insert-panel', 0, $my_panel);

// Insert -- or use a map from CSS class names to HTML snippets: 
DizmoElements('#my-accordion').daccordion('insert-panel', 0, {
    '.dizmo-accordion-panel-header-text': 'Panel',
    '.dizmo-accordion-panel-body-content': '#',
    unlisted: true // default: undefined
});

// Remove:
DizmoElements('#my-accordion').daccordion('remove-panel', 0);

Create, destroy or update list scrolling (or content scrolling):

DizmoElements('#my-accordion').daccordion('scroll-create');
DizmoElements('#my-accordion').daccordion('scroll-destroy');
DizmoElements('#my-accordion').daccordion('scroll-update');
DizmoElements('#my-accordion').daccordion('scroll2-create');
DizmoElements('#my-accordion').daccordion('scroll2-destroy');
DizmoElements('#my-accordion').daccordion('scroll2-update');

External Resources

  • https://github.com/dizmo/Accordion