$(document).ready(function(){
var tabContainers = $('div.tabs > div');
if ($('#mym-errors').children().length > 0) {
$('#mym-errors').fadeIn(1000);
$('#mym-errorlinks').fadeIn(1000);
$('#mym-step1').hide();
$('#mym-step2').hide();
$('#mym-step3').hide();
}
else
{
$('#mym-goto-step1').click(function(){
$('#mym-step1').fadeIn(1000);
$('#mym-step2').hide();
$('#mym-step3').hide();
$('#mym-errorlinks').hide();
});
$('#mym-goto-step1-errors').click(function(){
$('#mym-step1').fadeIn(1000);
$('#mym-step2').hide();
$('#mym-step3').hide();
$('#mym-errorlinks').hide();
$('#mym-errors').hide();
});
$('#mym-goto-step2').click(function(){
$('#mym-step1').hide();
$('#mym-step2').fadeIn(1000);
$('#mym-step3').hide();
$('#mym-errorlinks').hide();
});
$('#mym-goto-step3').click(function(){
$('#mym-step1').hide();
$('#mym-step2').hide();
$('#mym-step3').fadeIn(1500);
$('#mym-errorlinks').hide();
});
$('#mym-gobackto-step2').click(function(){
$('#mym-step1').hide();
$('#mym-step2').fadeIn(1000);
$('#mym-step3').hide();
$('#mym-errorlinks').hide();
});
$('#mym-startbut').click(function(){
$('#mym-step1').fadeIn(1000);
$('#mym-step2').hide();
$('#mym-step3').hide();
$('#mym-errorlinks').hide();
});
$('.togglehud').click(function(){
$('#hud').slideToggle(250);
});
}
});
Refactorings
No refactoring yet !
Tj Holowaychuk
May 17, 2009, May 17, 2009 17:14, permalink
You can easily abstract this routine into something you can use later on as well, pass the id's n such so its decoupled. I dont have time at the moment but when I get back I will take a look
paul.wilkins.myopenid.com
May 18, 2009, May 18, 2009 06:58, permalink
You could use a function that hides all of the relevant elements.
Then after calling that function, you just need to show the one that you're needing.
paul.wilkins.myopenid.com
May 21, 2009, May 21, 2009 07:32, permalink
Here is a way to improve things. I'm not sure though as to why you have tabContainers assigned, as it's not used in the code.
Oe of course, if you want an accordion behaviour, there is one built in to jQuery. http://docs.jquery.com/UI/Accordion
$(document).ready(function(){
var tabContainers = $('div.tabs > div');
function hideSections() {
$('#mym-errors').hide();
$('#mym-errorlinks').hide();
$('#mym-step1').hide();
$('#mym-step2').hide();
$('#mym-step3').hide();
}
if ($('#mym-errors').children().length > 0) {
$('#mym-errors').fadeIn(1000);
$('#mym-errorlinks').fadeIn(1000);
} else {
$('#mym-goto-step1').click(function(){
hideSections();
$('#mym-step1').fadeIn(1000);
});
$('#mym-goto-step1-errors').click(function(){
hideSections();
$('#mym-step1').fadeIn(1000);
});
$('#mym-goto-step2').click(function(){
hideSections();
$('#mym-step2').fadeIn(1000);
});
$('#mym-goto-step3').click(function(){
hideSections();
$('#mym-step3').fadeIn(1500);
});
$('#mym-gobackto-step2').click(function(){
hideSections();
$('#mym-step2').fadeIn(1000);
});
$('#mym-startbut').click(function(){
hideSections();
$('#mym-step1').fadeIn(1000);
});
$('.togglehud').click(function(){
$('#hud').slideToggle(250);
});
}
});
Rob Eastham
May 21, 2009, May 21, 2009 16:35, permalink
Thanks for all your help and suggestions guys. I went with this solution after reading all your adivce. Each link in the code has a class of .showstep assigned and a rel attribute (e.g. rel="#step2"), the rel attribute holds the id of the div I want to show after the item is clicked. Should have moved the tabcontainers var out of here before posting - sorry.
$(document).ready(function(){
function showStep(step){
$('#mym-step1').hide();
$('#mym-step2').hide();
$('#mym-errors').hide();
$(step).fadeIn(1000);
console.log("showStep called");
console.log(step);
}
$('.showstep').click(function(){
var step = $(this).attr("rel");
showStep(step);
});
});
view code example (in HAML):
%a.big-link.showstep{:href => '#', :rel => '#mym-step2'} Step 2
Any help gratefully received