One Page Layout Script problem

One Page Layout Script problem

I'm pretty new to Jquery and maybe somebody will find my mistake.So basically I'd like to get to know how do I create all in one page when i click on the anchors the page dynamically hides the main page and shows the sub page so i came up with an idea to work with display in css and toggle() method of jquery but the code works for me only for the first 2 clicks (show hide) and then it messes up there's the code of my webpage :
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .content {padding:20px;height:200px;background:#CCC; position: absolute;top:0;left:0;width: 100%;}
        .main {background: grey; display: visible; color: white; position: absolute; top: 0; width:100%; text-align: center; z-index:9; height: 100px;}
        .field {background: white;display:none; color:black;position: absolute;top:0;width:100%; z-index: 10;}
        .field2 {background: red;display:none; color:white;position: absolute;top:0;width:100%;z-index: 10;}
       
        .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.button { margin-left: 10px; color: white;}
    </style>
</head>
<body style="background: black;">
        <div style="position: fixed; top:50%;"><a href="#" class="button">Home</a><a href="#" class="button">Subpage 1</a> <a href="#" class="button">Subpage 2</a></div>
        <div class="main fade"> MAIN </div>
        <div class="field fade">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
        <div class="field2 fade">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    <script type="text/javascript" src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type="text/javascript">
        (function($){
            var fields = [$('.main'),$('.field'),$('.field2')]; // table of fields to show / hide
            var i = [true,false,false];    // status of a field index equal to button index
            $('.button').click(function() {
            var index = $('.button').index(this);
                for(var j=0;j<i.length;j++) { //checking other fields and hiding them + making the status as hidden (false) if the is the one I want to show / hide is skips the hiding process
                    if (j==index) {
                        continue;
                    }
                    if(i[j]==true) {
                        fields[j].toggle(),
                        i[j]=false;
                    }
                }
                fields[index].toggle(); // Hiding / showing the field
                if(i[index]==false){ i[index]=true; }
                    else { i[index]=false; }
               
                for(var j=1;j<3;j++){ // this part checks if all fields are disabled if so it toggles the main page content to be shown
                    if(i[j]==true) {
                        break;
                    }
                }
                if(j==3) { fields[0].toggle(); }
                return false;
            });
        }(jQuery));
    </script> 
</body>
</html>