- This topic is empty.
-
AuthorPosts
-
September 12, 2008 at 9:20 pm #23231chazzwickMember
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 #49741cssgirlParticipantI 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 2:35 pm #49751pabMemberCharles 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 #49753chazzwickMemberthanks 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 functionsSeptember 16, 2008 at 7:13 am #49803At_the_GatesParticipantHi 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 #49815chazzwickMemberthats great, thanks a lot :D
September 16, 2008 at 11:30 am #49817At_the_GatesParticipantQuick 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 22, 2008 at 7:39 am #49949andrewsquidgeParticipantVery 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.