# Radio Buttons Path Filter Control

Radio buttons path filter control is used to filter content by the defined path value at the specified CSS selector path.

See the Pen jPList Radio Buttons Path Filter Control by 1rosehip (@1rosehip) on CodePen.

## HTML Structure

Radio buttons path filter control is defined by required `data-jplist-control="radio-buttons-path-filter"` data attribute. The `data-group` attribute defines group of elements that should be filtered. The full list of data attributes can be found here.

    <!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
    <link href="jplist.styles.css" rel="stylesheet" type="path/css" />

    <!-- radio button path filter control -->
    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        name="name1"
        checked>
    Filter by 'd'
    </input>

    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-group="group1"
        data-name="name1"
        data-path=".title"
        name="name1">
    Filter by .title
    </input>

    <!-- content to filter -->
    <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 2</div>
            ....
        </div>

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

    </div>

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

### Top and bottom panels

Radio button path filter control can be placed in both top and bottom panels for the better user experience. In this case `data-name` attribute with the same value should be added. `name` attribute should be different in top and bottom panels. All other data attributes should have the same values:

    <!-- radio button path path filter control in the top panel -->
    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        name="top-panel-name"
        checked>
    Filter by .title
    </input>

    <!-- content to filter -->
    <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 2</div>
            ....
        </div>

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

    </div>

    <!-- radio button path filter control in the bottom panel -->
    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        name="bottom-panel-name"
        checked>
    Filter by .title
    </input>

    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-group="group1"
        data-name="name1"
        data-path=".title"
        name="bottom-panel-name">
    Filter by .title
    </input>

### Jump to top

`data-jump` data attribute can be used to scroll page to the specified location when user changes radio button value. `data-jump="top"` scrolls page to the top. Any CSS selector can be used instead of top keyword.

    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-name="name1"
        name="top-panel-name"
        data-jump="top"
        checked>
    Filter by .title
    </input>

## Deep Linking

Deep links can be used to keep user changes and control state after the page refresh. To implement them `data-id` attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

    <!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
    <link href="jplist.styles.css" rel="stylesheet" type="path/css" />

    <!-- radio button path filter control -->
    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-group="group1"
        data-name="name1"
        data-path=".title"
        name="name1"
        data-id="title1">
    Filter by .title
    </input>

    <!-- content to filter -->
    <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({
            deepLinking: true
        });
    </script>

## Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them `data-id` attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

    <!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
    <link href="jplist.styles.css" rel="stylesheet" type="path/css" />

    <!-- radio button path filter control -->
    <input
        type="radio"
        data-jplist-control="radio-buttons-path-filter"
        data-group="group1"
        data-name="name1"
        data-path=".title"
        name="name1"
        data-id="title1">
    Filter by .title
    </input>

    <!-- content to filter -->
    <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({
            storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
            storageName: 'jplist'
        });
    </script>

## Data Attributes

The full list of control data attributes.

Name | Description | Values
--- | --- | ---
`data-jplist-control` | Defines radio button path filter control. | "radio-buttons-path-filter"
`data-group` | Defines group of items that should be filtered. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute. | any path value
`data-name` | The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value. | any path value
`data-path` | CSS selector that defines the HTML element that should be filtered | "default" keyword for the initial value or any CSS selector
`data-jump` | This data attribute can be used to scroll page to the specified location when user changes a radio button value. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword. | top keyword or any CSS selector
`data-id` | This attribute is used for deep linking. | any path value that may contain letters, digits, underscores or dashes
`data-or` | Defines a group of controls that should be filtered though the "OR" logic | any text value, for example data-or="bags"