Hiding and Displaying the content upon clicking the Navigation using jQuery

Put this HTML inside the Body tag:

<div class="header">header goes here</div>

<div class="bgImages">
<div class="bgImg" id="flights-img" style="background-image:url(img/bg1.jpg); display:block;  "></div>
<div class="bgImg" id="hotel-img" style="background-image:url(img/bg2.jpg)"></div>
<div class="bgImg" id="car-img" style="background-image:url(img/bg3.jpg)"></div>
<div class="bgImg" id="package-img" style="background-image:url(img/bg4.jpg)"></div>
</div>

<div class="wrapper">
<div class="nav">
<ul>
<li id="flights">Flights</li>
<li id="hotel">Hotel</li>
<li id="car">Car</li>
<li id="package">Package</li>
</ul>
</div>

<div class="container">
<div class="content" id="flights-cont"  style="display:block;">Flights Content goes here..</div>
<div class="content" id="hotel-cont">Hotel Content goes here..</div>
<div class="content" id="car-cont">Car Content goes here..</div>
<div class="content" id="package-cont">Package Content goes here..</div>
</div>
</div>

<div class="footer">header goes here</div>

Put this CSS inside the Head tag:

*{margin:0;}
.bgImages{position:fixed; width:100%; height:100%; z-index:0; top:0;}
.bgImages .bgImg{width:100%; height:100%; display:none; background-repeat:no-repeat; background-size:100% 100%;}
.nav, .container{position:relative;   z-index:2;}
.nav{float:left; width:100px;}
.nav a{display:block;}
.container{float:left; width:300px;}
.container .content{background:#ffffff; padding:50px; margin:10px; display:none;}
.header{height:100px; background:#ffcc00; color:#fff; position:relative; z-index:2 }
.footer{height:100px; background:#ffcc00; color:#fff; position:relative; z-index:2 }
.wrapper:after{content:"."; clear:both; display:block; visibility:hidden; height:0;}

Put this JS inside the before Body closing tag:

$(document).ready(function(){
function homeSearchSlider(){
	$('.nav li').click(function(){
		var mySCId = $(this).attr('id');	
		var mySCIdCont = '#' + mySCId + '-cont';
		var mySCIdImg = '#' + mySCId + '-img';
		console.log($(mySCIdCont));
		if(!$(mySCIdCont).is(':visible')){
			$('.bgImg').slideUp("slow");
			$('.content').slideUp("slow");	
			$(mySCIdCont).slideDown("slow");
			$(mySCIdImg).slideDown("slow");
		}
	});  
};
	homeSearchSlider();
});

Download the Files

Author: Raghava

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *


*

'