Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS writing jquery more efficiently

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #23231
    chazzwick
    Member

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

    #49741
    cssgirl
    Participant

    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 :)

    #49751
    pab
    Member

    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!!!!

    #49753
    chazzwick
    Member

    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

    #49803
    At_the_Gates
    Participant

    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

    #49815
    chazzwick
    Member

    thats great, thanks a lot :D

    #49817
    At_the_Gates
    Participant

    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

    #49949
    andrewsquidge
    Participant

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.