Hi,
I am using JQuery to show and hide sections of text within my page.
The page has 10 sections of thext and 10 links.
I want to initially hide all 10 sections of text, and then show
section 3 when the link for section 3 is clicked, but make sure any
previously shown sections are then hidden.
Here is what I have used so far which dies wxactly what I want but
seems very long winded.
$(document).ready(function hideAll() {
//$('.stepText').hide();
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
$('.step1').click(function(){
$('.step1').removeClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step2').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').removeClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step3').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').removeClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step4').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').removeClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step5').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').removeClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step6').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').removeClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step7').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').removeClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step8').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').removeClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step9').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').removeClass('hiddenstep');
$('.step10').addClass('hiddenstep');
});
$('.step10').click(function(){
$('.step1').addClass('hiddenstep');
$('.step2').addClass('hiddenstep');
$('.step3').addClass('hiddenstep');
$('.step4').addClass('hiddenstep');
$('.step5').addClass('hiddenstep');
$('.step6').addClass('hiddenstep');
$('.step7').addClass('hiddenstep');
$('.step8').addClass('hiddenstep');
$('.step9').addClass('hiddenstep');
$('.step10').removeClass('hiddenstep');
});
});
