0

I'm making a "tabbed navigation" type of page, where the "home" "about" "links" etc. pages are actually hidden spans that show when the corresponding "a img" is clicked. At that time all other pages are to hide()

The "home" page is the main splash page, so if you click "about", the "about" page will show up (hiding the "home" page or whichever one was open), and clicking "about" again will .hide() the "about" span and return to the "home" span.

The main issue is occurring either randomly, or after a full pass through each link, where instead of hiding the "home" span, it's keeping that span open, and opening the clicked span underneath the "home" span.

I can't figure out what's causing this.

HTML

<div id="container">
<div id="navigation">   <a href="#" class="homeImg">One</a>
<a href="#" class="aboutImg">Two</a>
<a href="#" class="hireImg">Three</a>
<a href="#" class="workImg">Four</a>
<a href="#" class="linksImg">Five</a>

</div>
<div id="content">
<span class="startingContent" id="navContent">
            <h1>This is the splash page</h1>
            <h2>This should dissapear when another link is clicked</h2>
            <h3>Reappear when no other links are open</h3>
</span>

<span class="aboutContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="hireContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="workContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="linksContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>

    </div>
</div>

jquery

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
$('.aboutImg').click(function () {
$('.startingContent,  .hireContent, .workContent, .linksContent').hide(function   () {
            $('.aboutContent').show(function () {
                $('.aboutImg').click(function () {
                    $('.aboutContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.hireImg').click(function () {
 $('.startingContent, .aboutContent, .workContent, .linksContent').hide(function   () {
            $('.hireContent').show(function () {
                $('.hireImg').click(function () {
                    $('.hireContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.workImg').click(function () {
$('.startingContent, .aboutContent, .hireContent, .linksContent').hide(function () {
            $('.workContent').show(function () {
                $('.workImg').click(function () {
                    $('.workContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
 });

 $(document).ready(function () {
 $('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.linksImg').click(function () {
 $('.startingContent, .aboutContent, .hireContent, .workContent,').hide(function () {
            $('.linksContent').show(function () {
                $('.linksImg').click(function () {
                    $('.linksContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});



$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.homeImg').click(function () {
   $(' .aboutContent, .hireContent, .workContent, .linksContent').hide(function () {
            $('.startingContent').show();
        });
    });
});
 });

CSS

body {
background-color: #403C29;
margin: 0, auto;
padding: 0;
color: white;
}
#container {
position:absolute;
left: 50%;
width:960px;
margin-left:-480px;
}
#navContent {
width: 960px;
height: 600px;
background-color: #403C29;
}
#navigation {
text-align: center;
}

http://jsfiddle.net/alanh13/YpXbn/2/ (the demo doesn't work for some reason, works in a browser though)

4
  • problem with the fiddle is that the framework was set to mootools. change it to jquery 1.x and change the placement to in the head or the body
    – Orangepill
    May 16, 2013 at 4:30
  • You are installing multiple .click() handlers on the same object (.aboutImg) which is probably really confusing what happens.
    – jfriend00
    May 16, 2013 at 4:32
  • @AlanHill - I don't yet understand what your code is trying to accomplish.
    – jfriend00
    May 16, 2013 at 4:35
  • @AlanHill check my post. May 16, 2013 at 4:48

1 Answer 1

0

Also, you cannot have elements with the same ID. That is what classes are for. The id attribute is intentionally made for it to be unique.

Here's a refined version of what you should do: http://jsfiddle.net/TRTxB/1/

How about trying this... I'm sure you could easily apply this concept. Which is storing the ID of the div you want to show in a custom selector for a given element.

<div class="container">
    <div class="nav">
        <a content="aDiv" class="navBtn">A</a>
        <a content="bDiv" class="navBtn">B</a>
        <a content="cDiv" class="navBtn">C</a>
    </div>
</div>
<div id="aDiv" class="data">
    A div
</div>
<div id="bDiv" class="data">
    B div
</div>
<div id="cDiv" class="data">
    C div
</div>

JS:

 $(document).ready(function(){

    $('.navBtn').click(function(event){

        var contentSelector = $(this).attr('content');
        $('.data').hide();
        $("#"+contentSelector).show();
    });

});

Here's a JS Fiddle: http://jsfiddle.net/52CQA/

2
  • Here's a fix to your CSS jsfiddle.net/TRTxB/1 If this is a fix you should check mine as the answer @AlanHill. May 16, 2013 at 4:51
  • I did my friend, much appreciated. It was an ah-ha moment for me that made my jquery learning curve excel a lot quicker aha.
    – Alan Hill
    May 24, 2013 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.