How can create multiple filters using Uikit?

  • Please, how can I create a filter with Uikit that filters multiple items at the same time, without excluding the other.

    I mean, I'm creating a list of games and I need that when someone selects PS4 and then ADVENTURE, I want the PS4 filter to continue while now only the PS4 adventure games appears.


    Code
    1. <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active" uk-filter-control><a href="#">All</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li uk-filter-control="[data-game='adventure']"><a href="#">White</a></li> <li uk-filter-control="[data-console='ps4']"><a href="#">Blue</a></li> </ul> </div> <div>
    2. </div>
    3. </div>
    4. <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true"> <li data-color="white" data-size="large"> <div data-game="xbox" > <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-game="adventure"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-game="adventure" data-console="ps4"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li>
    5. </ul>


    Could help? thanks

  • SPQRInc

    Approved the thread.