Can my "view by category" jquery code be shortened or refined?

I am attempting to update my photography website and use jquery to show or hide the "categories" for my portfolio. I've searched all over an finally came up with this solution here:

http://jsfiddle.net/EwNRJ/145/

It works OK. When you click a button for a category, it hides the rest and shows that category. However, is the code too messy or can be shortened? Do any of you code ninjas know if it is legit or can be slimmed down?

I am mainly concerned with the way I hide other categories. For each function, I list out all of the other categories one by one an 'show' the category you clicked on. So if a user clicks "portrait" I first show the portrait class and then hide all other classes (landscape, personal, etc) one by one. If I add a category down the road I'll have to update each function. Not a big deal, just wanting to make sure there isn't a better way and that my code looks good and will not cause any memory problems from me being absolutely new at jquery.

Thanks in advance and have a great day.

P.S. If any real jedis want to look at another thing that only slightly bothers me; right now, each div fades away almost one after another. Is there a way to pause or something and have them all fade away more in unison? I hope that makes sense. I just would like (if at all possible) for them to animate away together instead of collapsing quickly one by one like dominos. O.K. Thanks again!

Answers


try this:

$('button').click(function() {
    $(this).siblings('.post').hide() // or $('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

DEMO


You should cache the categories, instead of trying to find them each time.

document.ready(function() {
     var Wedding = $('.wedding');
});

For the second problem you need to use a callback function, as a parameter. The callback function executes only after the main function has finished.

Example:

 $('div').click(function() {
      $(this).animate({'top': '50px'}, 500, function() {
           //callback - start
           $(this).text('a');
           //callback-end
     });
});

Do it like this http://jsfiddle.net/fedmich/M4G4r/

Put the buttons inside toggles. Put the elements inside .posts Make sure "portraits" maps to correct ones with "s"

Happy Coding :)

$('.toggles button').click(function(){
    var d_id = this.id;
    var obj_cur = $('.posts .' + d_id);

    $('.post').not( obj_cur ).hide(500);
    obj_cur.show(500);
});

Need Your Help

redirecting log4j messages from a method to a different log file

java logging log4j

Right now i use log4j in its plain vanilla/out-of-the-box form. I've a log4j.properties file in the class path and various logger messages littered across the web application. Now i'm interested in

Cocoapod path reference error

ios objective-c cocoa-touch cocoapods

I have newly added cocoapods into my application, now getting “parser error” while compiling the code in client machine, But the same source code working fine in my system (without any changes).