Hide a list except the selected list option

I need some help with a nested list, what I want to do is to show one of the list options and hide the rest of the list, a great example that I saw was in the filesonic.com languages selector or netlog status change in the header.

<ul class="links">
  <li class="us">United States</li>
  <li class="canada">Canada</li&开发者_如何学编程gt;
  <li class="france">France</li>
  <li class="china">China</li>
  <li class="englande">England</li>

United States is the default but when someone click on France, the rest of the list will hide and show will show.

thanks in advance.

---

$(function(){
  $('ul.links > li').click(function(){
      $('ul.links > li').fadeOut();
      $(this).fadeIn();
  });
});

---

Something like this will do the trick:

// Initially hide everything apart from the active list item
$('ul li.active').show()
  .siblings().hide();

// Set up a click handler that will show all the list items when the active
// element is clicked on, or makes the clicked on item the active item and hides
// the rest.
$('ul li').click(function(){
  var $parent=$(this).parent();
  if ($parent.is('.open')){
    $parent.removeClass('open');
    $(this).addClass('active')
      .siblings().removeClass('active').hide();
  }
  else {
    $parent.addClass('open').children().show();
  }
});

Here is a working JSBIN example: http://jsbin.com/onile4

Hope this helps!

---

If 'us' was selected, you could:

$('ul > li[class!=us]').css('display', 'none');

---

You could use something like:

if ($('.selected').length){
    return false;
}
else {
    $('.links li:first').addClass('selected');
}
$('.links li').click(
    function(){
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

coupled with the CSS:

li {
    display: none;
}

li.selected {
    display: list-item;
}

ul:hover li {
    display: list-item;
}

JS Fiddle demo.

---

A quick n dirty sample with comments(you can improvize it based on your needs):

Working example @ http://jsfiddle.net/dCZpx/

<div style="width: 100px">
    <div style="background-color: #FFDDEE" id="country">Click here to Select Country</div>
    <ul class="links">   
        <li class="us">United States</li>   
        <li class="canada">Canada</li>   
        <li class="france">France</li>   
        <li class="china">China</li>   
        <li class="englande">England</li> 
    </ul>
    <script type="text/javascript">    
        $(function(){

            //Bind the Click handler for the box that displays the selected Country
            $("#country").click(function(){
                //When the Country Box is clicked, show all the country names except the selected one
                $(".links li").not("." + $(this).data("current")).show("slow"); 
            });

            //First Hide all the Country Names list 
            $(".links li").hide();

            //Bind OnClick handler to all list elements which are children of .links
            $(".links li").click(function(){
                //Set the currently selected country in the data attribute of the #country element.
                $("#country").data("current", $(this).attr("class"));
                //Set the text of the #country div to the selected country name
                $("#country").text($(this).text());
                //Now hide all the list elements 
                $(".links li").hide("slow");
            });
               $(".links li.us").click();
        });
    </script> 
</div>