Burco Burco - 1 month ago 4
HTML Question

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?

Answer

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();
    });
});