I would add one common class to to all your .step1, ..., .step10
elements in your mark-up, and then do this:
// say the common class is "step"
$(document).ready(function() {
var $steps = $('.step');
$steps
.addClass('hiddenStep')
.click(
function() {
$steps.addClass('hiddenStep');
$(this).removeClass('hiddenStep');
}
);
}
On Mar 24, 10:47 am, phelyer <paulhel...@gmail.com> wrote:
> 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');
> });
>
> });
