CODEWITHSUNDEEP
jqueryhtmltoggle
Alex
Alex

Reputation: 7688

Jquery show/hide divs

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?

Upvotes: 2

Views: 2411

Answers (3)

Shyju
Shyju

Reputation: 218882

$(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/

Upvotes: 3

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

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/

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337704

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

Upvotes: 4

Related Questions