This tutorials guide you to build an a filtering system with the help of JQuery. First we explain this system .First we Create div in which we make some link of Major Subject. Next we create an other Div which have a list of all topic of different subject. Now in third section with JQuery we show those topic which match with our clicked subject and hide other topics.
<!-- the div with filter -->
<div id='filters'>
<a href='#'>All</a>
< a href='#' id='Excel'>Excel</a>
<a href='#' id='HTML'>HTML</a>
<a href='#' id='Photoshop'>Photoshop</a>
</div>
<!-- the div with content -->
<div id='content'>
<ul>
<li class='Excel'>Sum function in excel</li>
<li class='HTML'>Basic Tag in HTML</li>
<li class='Photoshop'>Photo shop enviorment</li>
<li class='Excel'>Formating in Excel</li>
<li class='Photoshop'>Extract in Photoshop</li>
<li class='HTML'>Links in HTML</li>
<li class='Excel'>Page Setup in Excel</li>
<li class='HTML'>HTML Formating Tag</li>
<li class='Photoshop'>Selection In Phtotshop</li>
</ul>
</div>
jQuery 01.$(document).ready(function()
{
//when a link in the filters div is clicked...
$('#filters a').click(function(e){
//prevent the default behaviour of the link
e.preventDefault();
//get the id of the clicked link(which is equal to classes of our content
var filter = $(this).attr('id');
//show all the list items(this is needed to get the hidden ones shown)
$('#content ul li').show();
/*using the :not attribute and the filter class in it we are selecting
only the list items that don't have that class and hide them '*/
$('#content ul li:not(.' + filter + ')').hide();
});
});