CODEWITHSUNDEEP
javascripthtml
Burco
Burco

Reputation: 93

show/hide ul li based on id

I would like to show certain li based on id. So when I click on class c1. It will show me just list info about africa. Now it shows every li from demo-agents. This one is "menu". It is a map. After clicking on continent it rolls me down and points on certain li id. So when I click on class c1. It points me to li id="africa" and shows me the text.

But now it shows every li id. I would like to hide all li id africa-s.america. And when I click on class c1 it will show below li id africa.

<div id="map-continents">
  <ul class="continents">
    <li class="c1"><a href="#africa">Africa</a></li>
    <li class="c2"><a href="#asia">Asia</a></li>
    <li class="c3"><a href="#australia">Australia</a></li>
    <li class="c4"><a href="#europe">Europe</a></li>
    <li class="c5"><a href="#north-america">North America</a></li>
    <li class="c6"><a href="#south-america">South America</a></li>
  </ul>
</div>

and then info 

<div id="demo-agents" class="demo-agents-list wrapper">
  <ul>
    <li id="africa"><h3>Africa</h3><p>Some info about Africa</p>  </li>
    <li id="asia"><h3>Asia</h3><p>Some info about Asia</p>  </li>
    <li id="australia"><h3>Australia</h3><p>Some info about Australia</p>  </li>
    <li id="europe"><h3>Europe</h3><p>Some info about Europe</p>  </li>
    <li id="north-america"><h3>North America</h3><p>Some info about North America</p>  </li>
    <li id="south-america"><h3>South America</h3><p>Some info about South America</p>  </li>
  </ul>
</div>

and js

$(document).ready(function(){
  $('.c1').each(function () {
    if($(this).hasClass('selected')) {
       $('.demo-agents-list wrapper').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
     }
     });

I hide div in CSS. But Do you have any suggestions?

Upvotes: 0

Views: 3338

Answers (4)

paranjothi
paranjothi

Reputation: 113

    $(document).ready(function(){ 
       $("#demo-agents li").hide(); 
       $(".continents li").click(function(){ 
         var crntlink = $(this).find("a").attr("href"); 
         $("#demo-agents li").hide(); $(crntlink).show(); 
       }); 
   });

Upvotes: 1

Chihying Wu
Chihying Wu

Reputation: 69

$(document).ready(function(){
  $("#demo-agents li").hide();
  $(".continents li").click(function(){
    var crntlink = $(this).find("a").attr("href");
    $("#demo-agents li").hide();
    $(crntlink).show();
  });
});

Upvotes: 0

James King
James King

Reputation: 1917

https://jsfiddle.net/jamesking/8rc2kepw/2/

$(function() {
  $("#demo-agents li").hide();
   $(".continents li a").on('click', function(e) {
        var liToShow = $(this).attr("href");
        $("#demo-agents li").hide();
        $(liToShow).show();
        e.preventDefault();
    });
});

Upvotes: 1

NachoDawg
NachoDawg

Reputation: 1544

css

/*Hide the li with the maps, not the container div. the container div
  must be visible, or else the children will always be invisible.*/
#demo-agents li { display:none }

jquery

$("#map-continents li")
  .each(function() { //Show the one who is selected by default
    if ($(this).hasClass('selected')) {
      $('#demo-agents li').hide();
      $($(this).find("a").attr('href')).fadeIn(600);
    }
  })
  .on("click", function() { //bind click event
    $("#map-continents .selected").removeClass("selected") //Remove "selected" class
    $(this).addClass("selected")        
    $('#demo-agents li').hide(); //Hide the maps again
    $($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
  })

Upvotes: 0

Related Questions