0

I tra to filter the uk-filter from a button or a checkbox.

I understand that I can create a filter, in the that contains .js-filter. but I want to create a checkbox outside the div. so how can a call or set a posible selecction.

This is what I have.

<div uk-filter=".js-filter" data-id="page#4" id="page#4" class="uk-margin">    
<ul class="el-nav uk-margin uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="">
        <a href="">All</a>
        </li>

            <li uk-filter-control="[data-tag~='Anual']">
        <a href="#">Anual</a>
    </li>
        <li uk-filter-control="[data-tag~='Temporada']">
        <a href="#">Temporada</a>
    </li>  
</ul>
        <div class="js-filter uk-child-width-1-1 uk-child-width-1-2@m uk-grid-match uk-grid" uk-grid=""> 
        <div data-tag="Anual Temporada" class="uk-first-column">
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">
                <h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom"> 
<a href="" class="uk-link-reset">Triplex  MI 47</a> 
</h3>        
<a href="">
</a>        
 <div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p></div>                
</div></div>   
<div>
<div class="el-item uk-card uk-card-primary uk-card-small uk-card-body uk-margin-remove-first-child">  
<h3 class="el-title uk-card-title uk-margin-remove-top uk-margin-remove-bottom">
<a href="" class="uk-link-reset">Botafoch MI35</a>                    </h3>        
 <a href="">
 </a>        
<div class="el-content uk-panel uk-margin-top"><p style="column-count: 2; font-family: Montserrat; font-size: 14px;">info</p>
<p style="text-align: justify;">info</p></div>        
</div></div>
</div>

</div>

This is the function i call from a onclick

function myFunction() {
        var filter = document.querySelector('.js-filter');
        var filterBar= document.querySelector('#page#4');
        var activeFilter= document.querySelector('div [data-tag:'Anual']');
        UIkit.filter( filterBar, {
            target: filter,
            selActive: activeFilter,
        });

}

in other post i see they set a selection of the filter when the page is load and recive a hash, i like to do the same but from a button. This is the other post UIkit 3's Filter component: Set active filter with URL hash - unable to change active filter with JS

0 Answers0