Mixitup.js filter

1

I am using mixitup for a restaurant menu, but I want that when the page is loaded it is filtered only in one of the menu categories instead of showing all the dishes, that is, I do not want the "all" The first thing that is shown is "areperia".

<ul id="filter-list" class="clearfix">
                <li class="filter active" data-filter="areperia">Areperia/Starters</li>
                <li class="filter" data-filter="parrilla" >La parrilla - BBQ</li>
                <li class="filter" data-filter="desayunos" >All day brekkie specials</li>
                <li class="filter" data-filter="limitados" >Limited editions</li>
                <li class="filter" data-filter="pizzeria" >La pizzeria - Pizzas</li>
                <li class="filter" data-filter="ensaladas" >Ensaladas - Salads</li>
                <li class="filter" data-filter="limon" >Ensaladas de limon - Lime salads</li>
                <li class="filter" data-filter="taqueria" >La taqueria</li>
                <li class="filter" data-filter="dulces"> La reposteria - Sweets </li>
                <li class="filter" data-filter="bebidas">La cafeteria - Coffees,teas,driks</li>
    </ul><!-- @end #filter-list -->
    <ul id="portfolio">
        <li class="item areperia">
            <h3><B>Arepas</B><br> BBQ roasted corn breads (butter optional)</h3>
            <h2 class="precio">2 for $5</h2>
          </li>
        <li class="item areperia">
            <h3>Arepa rainbow<br> 3 corn breads of spinach,sweet popato & beetroot</h3>
            <h2 class="precio centro">$10</h2>
          </li>
        <li class="item areperia">
            <h3>Yuca frita<br> Deep fried cassava root</h3>
            <h2 class="precio">3 for $5</h2>
          </li>
        <li class="item parrilla">
            <h3>Pinchos Vegetarianos<br>BBQ begie + haloumi sticks</h3>
            <h2 class="precio">2 for $10</h2>
           </li>
        <li class="item parrilla">
                <h3>Mazorca<br>BBQ roasted corn</h3>
                <h2 class="precio">$5</h2>
            </li>        
</ul>          

and my js is, here I am not making any strange modifications but I already try several things and nothing

$(function(){
    $('#portfolio').mixitup({
        targetSelector: '.item',
        transitionSpeed: 350,
    });

});
    
asked by Brenda Meneses Alvarez 14.12.2017 в 09:30
source

1 answer

1

You can use the load to tell you which filter to load

$('#portafolio').mixItUp({
   targetSelector: '.item',
   load: {
     filter: '.category-1'
   }
});
    
answered by 14.12.2017 / 14:24
source