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

I would do it like this

<div id="newest">
    <nav>
        <ul id="newNav">
            <li><a href="#" data-target="dani">Dani's Photos</a></li>
            <li><a href="#" data-target="alex">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>

and

$(function(){
    $('#newNav a').click(function(){
      var selected = $(this).data('target');
      $('#newest > ul').hide().filter('.' + selected).show();
    }).first().click();
});

demo at http://jsfiddle.net/gaby/zkPcb/