CODEWITHSUNDEEP
javascripthtmlcssfilteringmixitup
abbas_arezoo
abbas_arezoo

Reputation: 1078

Adding a data attribute to filtered items using Mixitup

I have a current project using Mixitup to filter content. I have a need for the remaining elements inherit specific CSS styles, and vice-versa. It seems the only way I can possibly do this is add a data attribute onto non-hidden items as Mixitup cannot remove elements from the DOM.

Here's an example of what filtered content would look like. Mixitup adds the inline style to hide elements when filters are selected from the <ul class="filter-list">:

<ul class="filter-list">
  <li><a class="filter" href="#" data-filter=".filter-1">Filter 1</a></li>
  <li><a class="filter" href="#" data-filter=".filter-2">Filter 2</a></li>
</ul>

<div class="items">
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item"></div>
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item"></div>
</div>

This uses the following config for Mixitup:

var mixer = mixitup('.items');
var mixer = mixitup(containerEl);

var mixer = mixitup(containerEl, {
    selectors: {
        target: '.filter-item'
    },
    animation: {
        duration: 300
    }
});

This works as expected, but ideally I'd like to extend this further so I get the following result:

<div class="items">
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item" data-order="1"></div>
  <div class="mix filter-1 filter-item" style="display: none;"></div>
  <div class="mix filter-2 filter-item" data-order="2"></div>
</div>

Ideally the data-order attribute increases by 1 for each remaining element.

Here's a Codepen with an ongoing prototype: http://codepen.io/abbasarezoo/pen/ygWayB/

Any help will be gratefully received.

Upvotes: 0

Views: 1000

Answers (0)

Related Questions