How to stop Javascript from cascading click events or how to assign properly to different divs.?

Question

I'm trying to limit my site to one page by hiding and revealing divs on click of a navigation button. The problem I'm having is that the other buttons will not work unless I hit the first button. I also have another problem with two divs showing at once if I spam two navigation buttons quickly. Wanted to make sure that didn't happen in case a viewer went click-button-happy.

I'm still pretty new to Javascript but understand most of the basics pretty well. Any help would be appreciated. Thanks.

The part of my HTML I'm working with:

    <!-- Beginning of navigationBar ----> 
<div id = "navigationBar">

    <!-- Beginning of logoBox ----> 
    <div id ="logoBox"> 
    </div>
    <!-- End of logoBox ---->

    <!-- Beginning of menuBar ---->
    <div id ="menuBar">
        <a href= "#" id="home">Home</a>
        <a href= "#" id="designers">Designers</a>
        <a href= "#" id="elements">Elements</a>
        <a href= "#" id= "sample">Your Sample Page</a>
        <a href= "#" id="contact">Contact Us</a>

    </div>
    <!-- End of menuBar ---->
</div>
<!-- End of navigationBar ---->

<!-- Beginning of mainContent ---->
<div id="mainContent">

    <!-- Begining of Intro Page --->
    <div id= "Intro"> Intro Page content goes here.
    </div>
    <!-- End of Intro Page --->



    <!-- Begining of Home Page --->
    <div id= "Home">Home page content goes here. 
    </div>
    <!-- End of Home Page --->



    <!-- Begining of Designers Page --->
    <div id= "Designers"> Designers page content goes here. 
    </div>
    <!-- End of Designers Page --->



    <!-- Begining of Elements Page --->
    <div id= "Elements"> Elements page content goes here.
    </div>
    <!-- End of Elements Page --->



    <!-- Begining of Sample Page --->
    <div id= "Sample">Sample page content goes here. 
    </div>
    <!-- End of Sample Page --->



    <!-- Begining of Contact Page --->
    <div id= "Contact">Contact page content goes here. 
    </div>
    <!-- End of Contact Page --->

The bit of CSS that has been added & working with:

 #menuBar {
    padding:5px;

}
#menuBar > a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
    border:#CCC 1px solid;
    background:#FFF;
    padding: 5px 10px;
    color: #999;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 3px;
    -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#menuBar > a:hover{
    background: #000;
    color: #FFF;
}


#mainContent {
}
#socialMediaBar {
    background:#000;
    width: 100%;
    height: 30px;
}
#copyRight {
}

#Intro {
    display:none;
}

#Home {
    display:none;
}

#Designers {
    display:none;
}

#Elements {
    display:none;
}

#Sample {
    display:none;
}

My javascript failing code:

    window.onload=function(){
    $('#Intro').fadeIn("Slow")};


$("#home").click(function(){

    $('#Home').fadeIn("Slow");
    if($('#Home').is(':visible')){  
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();}

$("#designers").click(function(){
    $('#Designers').fadeIn("Slow");
    if($('#Designers').is(':visible')){
    $('#Home, #Elements, #Sample, #Contact, #Intro').hide()};
    });
$("#elements").click(function(){
    $('#Elements').fadeIn("Slow");
    if($('#Elements').is(':visible')){
    $('#Designers, #Home, #Sample, #Contact, #Intro').hide()};
    });
$("#sample").click(function(){
    $('#Sample').fadeIn("Slow");
    if($('#Sample').is(':visible')){
    $('#Designers, #Home, #Elements, #Contact, #Intro').hide()};
    });
$("#contact").click(function(){
    $('#Contact').fadeIn("Slow");
    if($('#Contact').is(':visible')){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide()};
    });

    });

Answer 1

You are doing it totally wrong, just don't depend on ids of menu items, instead use the parent element #menuBar for event handler and use following approach (id's must be unique)

<div id ="menuBar">
    <a href= "#" data-mainContent="home">Home</a>
    <a href= "#" data-mainContent="designers">Designers</a>
    <!-- more -->
</div>

<div id="mainContent">
    <div id= "intro">Intro content goes here.</div>
    <div id= "home">Home page content goes here.</div>
    <div id= "designers">Designer page content goes here.</div>
     <!-- more -->
</div>

Then in your jQuery code try this (only this code will do the job and don't need separate handlers)

$(function(){ // instead of window.onload
    $('#mainContent').children().hide();
    $('#intro').fadeIn("Slow");

    // Click event handler for all
    $('#menuBar').on('click', 'a', function(){
        $('#mainContent').children().hide();
        var el = $(this).attr('data-mainContent');
        $('#mainContent div#' + el).fadeIn('slow');
    });
});

Also, use of window.onload=function(){ //... } is wrong here. Instead you should use document.ready event but I've used the short form here

// You may Use this instead of window.onload=function(){ ... };
$(function(){
    // code goes here
});

Working Example.

Update: Since there was a confusion about same ids being used twice but it was not because id's were Home and home so because of case sensitive nature of javascript, it' valid to have id=Home and id=home on the same page for two different elements. So, using the same (case sensitive, like Home and home) id, this could be done.

Answer 2

You are not hiding the contact us block in your CSS at the start, that's why when you first load your page you see the contact us content.

Check here a fixed EXAMPLE

$('#Intro').fadeIn("Slow");


$("#home").click(function () {
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();
    $('#Home').fadeIn("Slow");
});

Answer 3

First of all get rid of nested click event. In your code you have all click events under home click script. So obviusly other clicks wont run if you dont click home first. I moved ver last closing }); to where it belongs.

$("#home").click(function(){

    $('#Home').fadeIn("Slow");
    if($('#Home').is(':visible')){  
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();}
});
$("#designers").click(function(){
    $('#Designers').fadeIn("Slow");
    if($('#Designers').is(':visible')){
    $('#Home, #Elements, #Sample, #Contact, #Intro').hide()};
    });
$("#elements").click(function(){
    $('#Elements').fadeIn("Slow");
    if($('#Elements').is(':visible')){
    $('#Designers, #Home, #Sample, #Contact, #Intro').hide()};
    });
$("#sample").click(function(){
    $('#Sample').fadeIn("Slow");
    if($('#Sample').is(':visible')){
    $('#Designers, #Home, #Elements, #Contact, #Intro').hide()};
    });
$("#contact").click(function(){
    $('#Contact').fadeIn("Slow");
    if($('#Contact').is(':visible')){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide()};
    });

Than you can use callback function to avoid divs showing before previous item is not hidden.

So

$("#contact").click(function(){
    $('#Contact').fadeIn("Slow", function(){
       $('#Designers, #Home, #Sample, #Elements, #Intro').hide();
    });
});

But for click spamming problem Id do this:

$("#contact").click(function(){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide();
    $('#Contact').fadeIn("Slow", function(){});
});