Jquery show/hide divs

Question

Having a html structure like this:

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#">Dani's Photos</a></li>
            <li><a href="#">Alex's Photos</a></li>
        </ul>
    </nav>
    <ul class="dani">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
    <ul class="alex">
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        ...
    </ul>
</div>

Dani's Photos corresponds to ul class="dani" and Alex's photos to ul class="alex". What I need is to show only 1 ul at the time, and show/hide the other when click on the links inside , and showing by default the first ul.

Any ideas?

Answer 1

Amend your HTML like this:

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#dani">Dani's Photos</a></li>
            <li><a href="#alex">Alex's Photos</a></li>
        </ul>
    </nav>
    <ul id="dani" class="photos">
        <li>....Dani....</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
    </ul>
    <ul id="alex" class="photos">
        <li>....Alex....</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
        <li>........</li>
    </ul>
</div>

Then in jQuery:

$("#newNav A").on("click", function() {
    $(".photos").hide();
    var target = $(this).attr("href");
    $(target).show();
});

Example Fiddle

Answer 2

$(function(){
     $(".alex").hide();
});
$("#dan").click(function()
{
   $(".alex").hide();
   $(".dani").show();

});
$("#alex").click(function()
{
    $(".dani").hide();
    $(".alex").show();
});

Here is the sample : http://jsfiddle.net/yFDUB/4/

EDIT : As per your comment, you need a generic solution which works for n number of uls I wrapped the uls in a div with id "divItems" and i am assuming that the class name of the divs and the id of the links will be same.

$(function(){

    $("#divItems ul").hide();
    $("#divItems ul:first").show();
});

$("#newNav a").click(function()
{
  $("#divItems ul").hide();
  var className=$(this).attr("id"); 
  var objToShow=    $("."+className);  
  objToShow.fadeIn();  

});

Here is the sample : http://jsfiddle.net/yFDUB/10/