<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<div id="navcontainer">
 <ul id="navlist">
   <li><a href="#">Item one</a></li>
   <li><a href="#">Item two</a></li>
   <li><a href="#">Item three</a></li>
   <li><a href="#">Item four</a></li>
   <li><a href="#">Item five</a></li>
<script type='text/javascript'>

    $('#navlist li').click(function(){
        $('#navlist li').hide();



This hides li except clicked one. How to show all li again when clicked on visible li?

If item one is clicked, only item one is visible and other li are hidden. How to show hidden li if item one ($(this).show( );) clicked again

Hi Vizz, try:

    $('#navlist li').click(function(){


Even better, try :

$('#navlist').on('click', 'a', function() {
    return false;

Or, to maintain position :


.hidden {
    visibility: hidden;


$('#navlist').on('click', 'a', function() {
    return false;

See fiddle demo.


It's good.

How to add slide left animation to $(this) ,i.e. clicked menu, using .animate( ); ??????

thanks a lot !!!

It's great...

I have little problem. I can not edit your javascrip, it's too hard. Following is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 <style type='text/css'>
.hidden {
        visibility: hidden;
#navlist {margin-left:18%;}     
#navlist li
display: inline-block;
list-style-type: none;
padding: 15px;
height:400px auto;
width:75px auto;
border:1px solid #006699;
background:#009999;  position: relative;
#content {
          height: 565px;
          width: 75%;
          display: none; 

/*-------------------------- Homepage Slideshow ----------------------------------*/
#slider{display:block; padding:25px 15px 25px 15px; /*border:1px solid #006666;*/}
.fadein{position:relative;margin:0 auto;height:450px;width:700px;border:4px solid #eee;}
.fadein img{position:absolute;left:0;top:0;height:450px;}

<script type='text/javascript'>
var $navlist = $('#navlist');
var pos1 = $("li", $navlist).eq(0).position();
var reset = {
    marginLeft: 0,
    marginTop: 0
var d = 'dummy',
    h = 'hidden',
    f = 'fast',
    s = 'slow',
    o0 = {'opacity':0},
    o1 = {'opacity':1};

$navlist.on('click', 'li',find('a'), function() {

    var $li = $(this).closest('li').stop(true,true);
    var $sibs = $li.siblings().stop(true,true);
    if ($navlist.hasClass(d)) {
        $sibs.animate(o0, f, function() {
            var pos = $li.position(); 
                marginLeft: pos1.left - pos.left,
                marginTop:  pos1.top -  pos.top
            }, s);
    else {
        $li.animate(reset, s, function() {
            $sibs.css(o0).removeClass(h).animate(o1, f);
    return false;

    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut(1000).next('img').fadeIn(4000).end().appendTo('.fadein');}, 3500);



<div id="wrapper">
    <div id="container">
        <div id="header">
            <p>This is the Header</p>       
        <div id="content_wrapper">      
            <div id="slider">
                <div class="fadein">
                    <img src="slideshow/img1.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img2.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img3.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img4.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img5.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img6.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img7.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img8.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img9.jpg" width="700" height="250" alt=""/>
                    <img src="slideshow/img10.jpg" width="700" height="250" alt=""/>
            <div id="navigation">
                <div id="navcontainer">
                    <ul id="navlist">
                        <li><a href="#">Home</a></li><!-- id="active"-->
                        <li><a href="#">About</a></li>              
                        <li><a href="#">Services</a></li>               
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Partners</a></li>
                        <li><a href="#">Contact</a></li>                        
            <div id="content"> </div>            
        <div id="footer">
            <p>This is footer.</p>      

I want to hide slider when clicked on menu at the same time of hiding li and show content div.
I'm trying hard to add following code to script but I failed to do that.

 var page= $(this).find('a').attr('href');
 var menuid= $(this).attr('id');
 $('#content').load('' + page + '.php');
 $('#content').addClass(menuid).show("slide", { direction: "down" }, 1000);

Vizz, it will be something like this but there's still some work for you to do.


Thanks for the help.
I tried my best, but the problem is I can't think like you. So it's hard to modify your code.

But I'm working on it. Trying to add some code.

Make changes in code, if any, 'n if you have some some time.



In your working version, remember to wrap all the code in a $(function(){...}) structure. This is not necessary in jsfiddle as it is looked after automatically, as set up in the "Choose Framework" panel.

I have created a version here, which is hopefully easier to understand. The variables reset, h, s, f etc. are pasted into the jQuery animation code and the "select" and "deselect" actions are each replaced with an explanatory comment block. Replace these comment blocks with your own code.

I'm not sure I can do much more.



Little problem, now I added css,

#navlist li {height: auto;}

I added height:400 in, tab is selected block after marginLeft: pos1.left - pos.left, marginTop: pos1.top - pos.top, but it is not going to original size when I added height: 'auto' in, tab is deselected block after marginLeft: 0, marginTop: 0,

It's not going to auto height it remains 400 How to add auto height?


The jQuery .css(...) statements relate to the Home, About, Services etc tabs, not their #navlist wrapper.

Maybe you have already done this, but to address #navlist, you would need to add separate .css(...) statements at the same two points in the code.




If it still doesn't work, then try creating two classes in the style sheet (say .fixed and .auto) as follows:

.fixedheight { height:400px; }
.autoheight ( height:auto; )

Then swap classes with:


Thanks. It worked.
I made close button not working properly.


    var $slider = $("#slider");
    var $content = $("#content");
    var $navlist = $("#navlist");
    var pos1 = $("li", $navlist).eq(0).position();

    var $li = $("#navlist li");
    var $sibs = $li.siblings();

    $content.hide("slide", { direction: "up" }, 150);

            marginLeft: 0,
            marginTop: 0
        }, 'slow', function() {

            $slider.show("slide", { direction: "up" }, 800);

                'opacity': 0
                'opacity': 1
            }, 'fast');



One more problem occured (tab is deselected block)

$content.load('' + page + '.php').addClass(menuid).show("slide", {direction: "down"}, 800);

This loads page content normally on localhost but it takes time to fetch results on web server (windows n linux both)

$content.load('' + page + '.php').addClass(menuid).show("slide", {direction: "down"}, 800);

Above code shows first previously loaded page then after it loads current page.

e.g. If you choose Home it takes some time and loads Home page content then second if you choose Contact it loads first Home page content then after 5 seconds it loads Contact page content

How to solve this?

You need to show a "Loading..." placeholder, sized and positioned to represent $content during the ajax load() delay. Hide the loading placeholder and show $content when the ajax success event fires.

Once you have that working, you can also have an "Error" placeholder, similarly sized and positioned, to be shown if the ajax 'error' event fires.

You will find it better to work with $.ajax(...) rather than the abbreviated .load() method.

And can you help me for close button ?

With the toggle action in place on the tabs, then all the close button needs to do is simulate a click on the active tab.

$('#close').click(function() {
    $("#navlist li").not('.hidden').find('a').trigger('click');

Make sure the close button is hidden (or otherwise disabled) when all tabs are showing, else it will simulate a click on all tabs simultaneously!