Grow your CSS skills. Land your dream job.

writing jquery more efficiently

  • # September 12, 2008 at 9:20 pm

    Im using jquery to make a nice looking horizontal accordion thingy.

    http://charles-harvey.co.uk/radio/

    However, im thinking my jquery could be written more efficiently. I cant really find anything online to help me. Can anyone help?

    Heres the jquery:

    Code:
    $(document).ready(function() {
    $(“#contact”).hide();
    $(“#info”).hide();
    $(“#details”).hide();

    $(“a#contact-button”).click(function(){
    $(“#about”).slideUp();
    $(“#contact”).slideDown();
    $(“#info” ).slideUp();
    $(“#details”).slideUp();
    });

    $(“a#about-button”).click(function(){
    $(“#about” ).slideDown();
    $(“#contact”).slideUp();
    $(“#info” ).slideUp();
    $(“#details”).slideUp();
    });

    $(“a#info-button”).click(function(){
    $(“#info” ).slideDown();
    $(“#contact”).slideUp();
    $(“#about”).slideUp();
    $(“#details”).slideUp();
    });

    $(“a#details-button”).click(function(){
    $(“#details” ).slideDown();
    $(“#contact”).slideUp();
    $(“#about”).slideUp();
    $(“#info”).slideUp();
    });
    });

    # September 12, 2008 at 10:21 pm

    I don’t have an answer for you since my jQuery skills are lacking, but I really like the accordion method you have going on here :)

    # September 13, 2008 at 1:33 pm

    I would say that if it’s not broken. don’t fix it. The according thingy works well in my browser. Nice work.

    # September 13, 2008 at 1:50 pm

    I like you code. Would you mind if I used it?

    pab
    # September 13, 2008 at 2:35 pm

    Charles that is a great effect very smooth, as for the coding, there might be a simpler way,

    you can try creating a class of hide and added to your anchors and instead of calling all the #id you just call

    $(".hide").hide();

    I didn’t test this but i think it might work, you might have to do some adjusting to it.

    but yeah back to the props …

    good job!!!!

    # September 13, 2008 at 3:10 pm

    thanks for all the kind words, and thanks pab for the advice.
    Of course anyone can use the code, i didnt really do anything special here, its all just the same 2 Jquery functions

    # September 16, 2008 at 7:13 am

    Hi Charles,

    You can simplify it like this… The only changes I’ve made to the markup is to add rel attributes into the anchor elements which match the ids of the target divs. Basically this method passes the target div to jQuery via the rel attribute, then identifies which divs it needs to hide using the :not selector combined with that target div:

    Code:
    $(document).ready(function() {

    $(“#text div:not(#about)”).hide(); //choose a first page to show

    $(“#buttons a”).click(function(){
    var target = $(this).attr(“rel”); //match the rel attribute to the target
    $(“.current”).removeClass(“current”); //remove any existing ‘current’ class because it’s about to change
    $(“#”+target).addClass(“current”).slideDown(); //add current class to the target div and then show it
    $(“#text div:not(.current)”).slideUp(); //hide all the divs that do not have ‘current’ class
    });
    });

    Hope that helps,

    James

    # September 16, 2008 at 11:17 am

    thats great, thanks a lot :D

    # September 16, 2008 at 11:30 am

    Quick edit in fact… just browsing through the jQuery docs and found an even better way to optimise it, using a ‘not’ traversing expression – .not("#"+target) – rather than a :not selector like in the first line. You could probably also achieve the same thing using the :visible and :hidden selectors… either way, 29 lines of code down to 8 is not bad:

    Code:
    $(document).ready(function() {

    $(“#text div:not(#about)”).hide();

    $(“#buttons a”).click(function(){
    var target = $(this).attr(“rel”);
    $(“#”+target).slideDown();
    $(“#text div”).not(“#”+target).slideUp();
    });
    });

    James

    # September 17, 2008 at 9:56 am

    Very nice optimization! I need to get better at this kind of thing myself — start thinking like a coder!

    # September 22, 2008 at 7:39 am

    Very nice effect. I’m really getting into this jQuery stuff and finding it all very exciting. Let us know when you’ve included the newly optimised code on your site – I’d love to take a look.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".