@!(data, className) @function header(){} @function body(){

# Hidden Sort Control

This is an invisible sort control that sorts content on page load.

See the Pen jPList Hidden Sort Control by 1rosehip (@1rosehip) on CodePen.

## HTML Structure

Hidden sort control is defined by required `data-jplist-control="hidden-sort"` data attribute. The `data-group` attribute defines group of elements that should be sorted.

    <!-- hidden sort control -->
    <div
        style="display: none"
        data-jplist-control="hidden-sort"
        data-group="group1"
        data-path=".title"
        data-order="asc"
        data-type="text">
    </div>

    <!-- content to sort -->
    <div data-jplist-group="group1">

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

    </div>

    <!-- jplist library -->
    <script src="jplist.min.js"></script>
    <script>
        jplist.init();
    </script>

## Double / Multiple Sorting

Double sorting can be achieved with additional set of data-path-1, data-order-1 and data-type-1 attributes. There can be any number of such sets, for example (data-path-2, data-order-2, data-type-2), (data-path-3, data-order-3, data-type-3), ... etc.

    <!-- hidden sort control -->
    <div
        style="display: none"
        data-jplist-control="hidden-sort"
        data-group="group1"

        data-path=".title"
        data-order="asc"
        data-type="text"

        data-path-1=".price"
        data-order-1="asc"
        data-type-1="number">
    </div>

    <!-- content to sort -->
    <div data-jplist-group="group1">

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            <div class="price">12</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            <div class="price">45</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            <div class="price">10</div>
            ....
        </div>

    </div>

    <!-- jplist library -->
    <script src="jplist.min.js"></script>
    <script>
        jplist.init();
    </script>

## Data Attributes

The full list of control data attributes.

Name | Description | Values
--- | --- | ---
`data-jplist-control` | Defines hidden sort control. | "hidden-sort"
`data-group` | Defines group of items that should be sorted. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute. | any text value
`data-path` | CSS selector that defines the HTML element that should be sorted | any CSS selector or "default" keyword
`data-order` | Specifies the sort order. | "asc" or "desc"
`data-type` | Specifies the type of content that should be sorted. | "text" (default), "number" or "datetime"
`data-datetime-format` | This attribute is used when `data-type="datetime"`. It defines the structure of the date using following wildcards: {year}, {month}, {day}, {hour}, {min}, {sec}. | Date structure, for example: `data-datetime-format="{month} {day}, {year}"`

} @render(process.cwd() + '/build/site/layouts/documentation.html', data, 'Hidden Sort Control', header, body, 'sort-controls', 'hidden-sort')