Filter Tag Cloud : CSS3 jQuery

Filter Tag Cloud : CSS3 jQuery - Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://fonts.googleapis.com/css?family=Domine:400,700"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class='container'>
    
    <div class="row-fluid">
        <div class='mastheadline'>
             <h1>Filter by Tag Cloud</h1>

            <hr class="soften">
             <h5>After Ajax Call from MySQL</h5> 
        </div>
            
               </div>   
        <div class='well'  id='cloud'>
     
                
  <span id=".net" class="">.net</span>

<span id="nurse" class="">nurse</span>

<span id="Accountant" class="">Accountant</span>

<span id="Director" class="">Director</span>

          
        </div>
        <ul>
            <li class="Director walking" data-categoryid="Director,Male">male Director</li>
            <li class="male Accountant" data-categoryid="male Accountant">male Accountant</li>
            <li class="standing .net" data-categoryid="standing, .net">female .net</li>
            <li class="female nurse" data-categoryid="female, nurse">female nurse</li>
            <li class="male Accountant" data-categoryid="male, Accountant">male Accountant</li>
        </ul>
 
</div>

CSS

/* Reset
-------------------------------------------------------------- */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;
}
table {
    border-collapse:separate;
    border-spacing:0;
    margin-bottom:1.4em;
}
caption, th, td {
    text-align:left;
    font-weight:400;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
}
blockquote, q {
    quotes:;
}
a img {
    border:none;
}
::-moz-selection {
    background: #EE4938;
    color:#fff;
    text-shadow: none;
}
::selection {
    background: #EE4938;
    color:#fff;
    text-shadow: none;
}
body {
    padding:20px;
    font: normal 100%/1.5'Domine', Georgia, "Times New Roman", serif;
}
.tagchoice {
    background-color: #777777;
    color:#fff;
    border-bottom:#ffffff 1px solid;
}
h1 {
    font-size:2em
}
.tag {
    width: 20px;
    height: 30px;
    padding:6px;
    color:#ffffff;
    font-size:.8em;
    text-transform:uppercase;
    font-weight:700;
    text-shadow: 1px 1px 1px rgba(000, 000, 000, 1);
    text-shadow: 0px 1px 1px #222222;
    filter: dropshadow(color=#222222, offx=0, offy=1);
    background: #f8294e;
    background: linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
    background: -webkit-linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
    background: -moz-linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
    background: -ms-linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
    background: -o-linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
   ...

JavaScript

function run() {
    $("div").show();
    var choice = $.map($('span.tag'), function (el) {
        return "." + el.id;
    }).join("");
    if (choice) $("div").not(choice).hide();
};


$('#cloud  span').on('click', function (e) {

    $(this).toggleClass("tag");
    run()
});

// the List would have been obtained from a previous search to DB retrieving, say, Zip Code or city. All people living in Chicago area.--> Who have added tags with xxxxx.
var $li = $('ul li');
$('#cloud  span').on('click', function (e) {
    $(this).toggleClass("tag");
    $li.filter('[data-categoryid*=' + this.id + ']').toggleClass("tagchoice").show();
    $li.not('.tagchoice').hide();
});