I have successfully implemented data filtering on my website using data-filter.
While everything is working great, I am interested in displaying items with specific attributes upon loading.
For instance, I want to load only green objects by default instead of displaying all items.
http://jsfiddle.net/joshvogt/UybPY/
HTML:
<section>
<a href="#" data-filter="all" tabindex="-1">ALL</a>
<a href="#" data-filter="red" tabindex="-1">RED</a>
<a href="#" data-filter="green" tabindex="-1">GREEN</a>
<a href="#" data-filter="blue" tabindex="-1">BLUE</a>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="green"></div>
</section>CSS:
section {
display: block;
float: left;
border: 2px solid green;
min-height: 300px;
width: 100%;
border-radius: 4px;
}
a {
display: block;
float: left;
width: 25%;
text-decoration: none;
text-align: center;
padding: 5px 0;
color: white;
background: #1271C7;
}
div {
display: block;
float: left;
height: 40px;
width: 40px;
}How can I achieve the display of only green elements upon loading?
div[data-filter="green"]{
background: green;
}