<script>
$(document).ready(function () {
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.css("left", "auto");
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$nav.css("left", "auto");
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
$('a.bck').click(function() {
var $aAside = $('aside');
$('aside>ul>li:visible').hide();
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click
}); //closes .ready()
</script>
http://jsfiddle.net/LPDkg/ provides a link to the code I am currently working on. After navigating to menu, then part one, clicking back and attempting to click part one again may result in the content not being displayed. If you have any insights into what might be causing this issue, please feel free to share. Any assistance is appreciated. Thank you.