How to show hidden li

Question

vizz 0 Junior Poster

12 Years Ago

<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>
 </ul>
</div>
<script type='text/javascript'>
$(document).ready(function(){

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

    });

}); 
</script>

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

javascript

2 Contributors
17 Replies
1K Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Hi Vizz, try:

    $('#navlist li').click(function(){
        $(this).siblings().toggle();
    });

Airshow

Edited 12 Years Ago by Airshow because: x

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Even better, try :

$('#navlist').on('click', 'a', function() {
    $(this).closest('li').siblings().toggle();
    return false;
});

Or, to maintain position :

CSS:

.hidden {
    visibility: hidden;
}

Javascript:

$('#navlist').on('click', 'a', function() {
    $(this).closest('li').siblings().toggleClass('hidden');
    return false;
});

See fiddle demo.

Airshow

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Try this - trickier than I expected.

Airshow 416 WiFi Lounge Lizard

12 Years Ago

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

Airshow

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Vizz,

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.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vizz 0 Junior Poster · Answer 1 · 2012-03-27T05:45:25+00:00

Thanks
It's good.

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

vizz 0 Junior Poster · Answer 2 · 2012-03-31T03:27:42+00:00

vizz 0 Junior Poster

12 Years Ago

thanks a lot !!!

It's great...

vizz 0 Junior Poster · Answer 3 · 2012-03-31T13:10:30+00:00

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vizz</title>
<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;
min-width:75px;
text-align:center;
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;}
</style>


<script type='text/javascript'>
$(document).ready(function(){
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);
    $navlist.toggleClass(d);
    if ($navlist.hasClass(d)) {
        $sibs.animate(o0, f, function() {
            $sibs.css(o1).addClass(h);
            var pos = $li.position(); 
            $li.animate({
                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;
});
});

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

</script>

</head>

<body>
<div id="wrapper">
    <div id="container">
        <div id="header">
            <p>This is the Header</p>       
        </div>       
        <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>
            </div>
            <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>                        
                    </ul>
                </div>
            </div>              
            <div id="content"> </div>            
        </div>      
        <div id="footer">
            <p>This is footer.</p>      
        </div>       
    </div>       
</div>
</body>
</html>

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 0 Junior Poster · Answer 4 · 2012-04-01T05:27:29+00:00

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.

Thanks.

vizz 0 Junior Poster · Answer 5 · 2012-04-02T16:10:24+00:00

Thanks.

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?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2012-04-02T19:06:38+00:00

Vizz,

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.

$(selector).css({height:400});

and

$(selector).css({height:'auto'});

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:

$(selector).removeClass('fixedheight').addClass('autoheight');
//.....
$(selector).removeClass('autoheight').addClass('fixedheight');

vizz 0 Junior Poster · Answer 7 · 2012-04-03T03:44:15+00:00

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

$('#close').click(function(){

    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);

        $li.animate({
            marginLeft: 0,
            marginTop: 0
        }, 'slow', function() {

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

            $sibs.css({
                'opacity': 0
            }).removeClass('hidden').animate({
                'opacity': 1
            }, 'fast');
            $li.css({height:'auto'},1000);


        });



});

vizz 0 Junior Poster · Answer 8 · 2012-04-03T10:39:42+00:00

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)

vizz 0 Junior Poster · Answer 9 · 2012-04-03T11:23:35+00:00

$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?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2012-04-03T16:49:06+00:00

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.

vizz 0 Junior Poster · Answer 11 · 2012-04-03T17:02:56+00:00

ok
And can you help me for close button ?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2012-04-04T09:57:52+00:00

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!

Airshow