Javascript, data-filter on loading document

Question

I have a site, where some divs are being sorted via data-filters.

<li><a href="#" class="active" data-filter=".xyz">XYZ</a></li>

Now when loading the Document all divs show up. How can I achieve it, that only the div with class "xyz" shows up?

Hope someone can help me, really not getting it right now.

Edit: Sorry for inputting so few code.

<ul class="filter">
    <li><a href="#" class="active" data-filter=".nature">Nature</a></li>
    <li><a href="#" data-filter=".logo">Logo</a></li>
    <li><a href="#" data-filter=".brochures">Brochures</a></li>
    <li><a href="#" data-filter=".business-card">Business Card</a></li>
</ul>
<div class="nature">...</div>
<div class="logo">...</div>

Now every div is shown on pageload. I'd only like the first div (.nature) to be shown. Filtering is done by?? I'd guess jquery.

Answer 1

Assuming that by "show up" you mean display, you can control this using css:

[data-filter = '.xyz'] {
  display: none;
}

That will match all elements that have an attribute called data-filter with an exact value of .xyz . If you're going to use this attribute much like the class attribute, where classes are separated by whitespace, you can use the |= attribute selector instead:

[data-filter ~= '.xyz'] {
  display: none;
}

Here you can see it in a working demo .

Hope this helps!

Answer 2

If I understood correctly, you need to hide any element having a data-filter attribute's value (a CSS selector) that doesn't match the element on which the attribute is on?

You could do something like this:

HTML

<div class="xyz" data-filter=".xyz">should show</div>
<div class="no-xyz" data-filter=".xyz">should not show</div>
<div class="no-xyz" data-filter=".xyz">should not show</div>

JS

window.onload = function () {
    var filteredEls = document.querySelectorAll('[data-filter]'),
        i = 0,
        len = filteredEls.length,
        frag = document.createDocumentFragment(),
        el, elClone;

    for (; i < len; i++) {
        el = filteredEls[i];

        elClone = el.cloneNode(false);

        frag.appendChild(elClone);

        if (!frag.querySelector(el.getAttribute('data-filter'))) {
            el.style.display = 'none';
        }

        frag.removeChild(elClone);
    }

};

EDIT: Looks like you edited the question and I misunderstood it the first time.

If you are using jQuery and already have a plugin that does the filtering when you click on those filter elements, but the plugin doesn't initially hide any elements, you can probably simply trigger a click event on the initial filter.

$(function () {
    $('ul.filter li:first-child > a').trigger('click');
});

Answer 3

I found the Solution. I only did google the false things. Solution was right here. How to activate JS data-filter when page loads? Thanks to you all for your answers!