Filtering Script Example | cloudythms.tumblr.com

<!-- optional reset button.
     give it class "ft" and id "reset"
     the visible text doesn't matter. -->
<div><u>optional:</u>
    <span class="ft" id="reset">reset everything</span>
</div>

<!-- here are the filter type buttons.
     you don't have to have any, you can have a few or all.
     give each type the classes "ft" and "t"
     give the default type the class "active" as well
     give each type one of these ids: single/and/or/not
     the visible text does not matter, the ids do! -->
<div><u>type:</u>
  <span class="ft t active" id="single">[single]</span>
  <span class="ft t" id="and">[and]</span>
  <span class="ft t" id="or">[or]</span>
  <span class="ft t" id="not">[not]</span>
</div>


<div><u>filters:</u>
<!-- make a "show all" button, give it the id "all"
     and the classes "ft" and "active".
     the visible text doesn't matter. -->
  <span class="ft active" id="all">(all)</span>
<!-- give each filter the classes "ft" and "f"
     the visible text of these filters is important!
     write the tags the same way you do in the content.  -->
  <span class="ft f" style="color:blue;">blue</span>
  <span class="ft f" style="color:red;">red</span>
  <span class="ft f" style="color:green;">green</span>
</div>

<!-- wrap each thing (icon, ficrec, ...) in a class (here:"icon")
     in there, you should have a class with the tags (here:"tags")
     (the tags class wraps all tags, not each single tag)
     do not use spaces ( ) or hypehns (-) in your tags,
     use underscores (_) instead.
     seperate tags by at least one space. you can also wrap
     each one in a span if you want. (as shown here) -->
<div class="icon">
<div class="tags">
    <span>blue</span>
</div>
</div>

<div class="icon">
<div class="tags">
    <span>blue</span> <span>red</span>
</div>
</div>

<div class="icon">
<div class="tags">
    <span>blue_red</span> <!-- this is ONE tag, it won't show for "blue" or "red" -->
</div>
</div>


<div class="icon">
<div class="tags">
    <span>bluered</span> <!-- this is a completely different tag, it won't show for "blue" or "red" -->
</div>
</div>