1 reply [Last post]
sblatch
sblatch's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Joined: 2012-09-26
Posts: 3
Points: 6

I found the following page which gives a neat filterable jQuery gallery:

net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

I have used this on our new test site:

www.generator.uk.com/test/our-work/portfolio.html

BUT I don't want the filterable list to be a list I would like it to be a drop down menu which also shows the current selection. ie. When you first land on the page you would see ALL and you would then hover over to see the rest of the menu. Once you've selected another eg. Digital that would be shown at the top!

I have tried my out of the box CSS but can't seem to get it to work with this.

Any help would be appreciated!

Brendon77
Brendon77's picture
Offline
newbie
Last seen: 4 years 40 weeks ago
Timezone: GMT+5
Joined: 2013-06-26
Posts: 3
Points: 3

$(document).ready(function ()

$(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();

});

});