category filter button on active

Question

I want my "starter" datafilter to be on active when page load. Seems that it's not working. Do anyone know what the problem is? i Use a jquery plugin called mixitup.

I am new to coding, so i am sorry if it's a stupid question.

This is my code:

<section class="work-box">
  <div class="container reveal">
    <div class="row">
      <div class="col-lg-12">
        <div class="box-menu">
          <ul>
            
            <li class="mixitup-control-active" data-filter=".starter">Starters</li>
            <li data-filter=".salad">Salads</li>
            <li data-filter=".pulse">Pulses</li>
            <li data-filter=".grill">On the grill</li>
            <li data-filter=".chicken">Chicken</li>
            <li data-filter=".meat">Lamb, pork & beef</li>
            <li data-filter=".seafood">Seafood</li>
            <li data-filter=".pasta">Pasta dishes</li>
            <li data-filter=".inter">International cuisine</li>
            <li data-filter=".rice">Rice & potatoes</li>
          </ul>
        </div>


<div class="container py-3">

    <div class="box-list row row-cols-1 row-cols-md-2">

      <div class="col mix box-item p-1 p-md-3 starter">
        <div class="d-flex justify-content-between">
          <h5 class="card-food">Tzatziki</h5>
          <h5 class="card-price"><span class="sizeprice">€</span>3.60 | <span class="sizeprice">€</span>5.90</h5>
        </div>
      </div>

      <div class="col mix box-item p-1 p-md-3 starter">
        <div class="d-flex justify-content-between">
          <h5 class="card-food">Fish roe dip</h5>
          <h5 class="card-price"><span class="sizeprice">€</span>3.90 | <span class="sizeprice">€</span>6.50</h5>
        </div>
      </div>

      <div class="col mix box-item p-1 p-md-3 starter">
        <div class="d-flex justify-content-between">
          <h5 class="card-food">Eggplant salad</h5>
          <h5 class="card-price"><span class="sizeprice">€</span>4.20 | <span class="sizeprice">€</span>7.40</h5>
        </div>
      </div>

......


 <script src="https://code.jquery.com/jquery-2.2.4.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js" ></script>


  <script>
    $(document).ready(function(){
      var mixer = mixitup('.box-list')

      
    });
  </script>

Tried everything.

Expect it to be on active.

Answer 1

I'm not sure, you close all the divs? Try this

`<section class="work-box">
  <div class="container reveal">
    <div class="row">
      <div class="col-lg-12">
        <div class="box-menu">
          <ul>
            <li class="mixitup-control-active" data-filter=".starter">Starters</li>
            <li data-filter=".salad">Salads</li>
            <li data-filter=".pulse">Pulses</li>
            <li data-filter=".grill">On the grill</li>
            <li data-filter=".chicken">Chicken</li>
            <li data-filter=".meat">Lamb, pork & beef</li>
            <li data-filter=".seafood">Seafood</li>
            <li data-filter=".pasta">Pasta dishes</li>
            <li data-filter=".inter">International cuisine</li>
            <li data-filter=".rice">Rice & potatoes</li>
          </ul>
        </div>


        <div class="container py-3">
          <div class="box-list row row-cols-1 row-cols-md-2">
            <div class="col mix box-item p-1 p-md-3 starter">
              <div class="d-flex justify-content-between">
                <h5 class="card-food">Tzatziki</h5>
                <h5 class="card-price"><span class="sizeprice">€</span>3.60 | <span class="sizeprice">€</span>5.90</h5>
              </div>
            </div>

            <div class="col mix box-item p-1 p-md-3 starter">
              <div class="d-flex justify-content-between">
                <h5 class="card-food">Fish roe dip</h5>
                <h5 class="card-price"><span class="sizeprice">€</span>3.90 | <span class="sizeprice">€</span>6.50</h5>
              </div>
            </div>

            <div class="col mix box-item p-1 p-md-3 starter">
              <div class="d-flex justify-content-between">
                <h5 class="card-food">Eggplant salad</h5>
                <h5 class="card-price"><span class="sizeprice">€</span>4.20 | <span class="sizeprice">€</span>7.40</h5>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>

  <script>
    $(document).ready(function(){
      var mixer = mixitup('.box-list');
    });
  </script>
</section>
`

Answer 2

The mixitup-control-active is added by the library.

If you want to set the initial state, you can do it via js like:

const mixer = mixitup('.box-list', {
  load: {
    filter: '.starter',
  },
});

See mixitup.Config.load inside the docs.