Hide/Show multiple li content with same id

Question

I have a lot of li elements that I want to either hide/show when clicking a filter button.

At the top of the page I have buttons using this:

<span id="filter">                          
    <a class="btn btn-primary btn-xs active" id="showall">Show All</a>
    <a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
    <a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
    <a class="btn btn-info btn-xs showSingle" target="3">Images</a>
    <a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
    <a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>                              
</span>

And then my li elements are like this:

<li id="li1" class="targetLi posts">
<li id="li2" class="targetLi videos">
<li id="li3" class="targetLi images">
<li id="li4" class="targetLi gifs">
<li id="li5" class="targetLi playlist">
<li id="li1" class="targetLi posts">

Notice that id="li1" is listed twice.

$(function(){
    $('#showall').click(function(){
        $('.targetLi').show("slow");
    });
    $('.showSingle').click(function(){
        $('.targetLi').hide("slow");
        $('#li'+$(this).attr('target')).show("slow");
    });
}); 

What I want to do is show all elements with the same id when the filter button is pressed. I am not sure what I am missing. When I click the button to show only the Posts for example it will hide everything and show only 1 Post even though there are 2. Can someone help point me in the right direction?

Answer 1

Using multiple ids is going against convention. As a result you will find several pitfalls with this approach, including that only one of the ids can be queried. Please avoid that and use class names as they are intended to refer to sets of elements, while ids are meant to refer to individual elements.

However, that isn't the problem with the code shown. The problem is that you attempted to select elements based on a class instead of id - class is ., id is #.

I would suggest refactoring your design to better select these elements. This includes naming a parent ul element, and also caching some of the key elements. Shown below:

$(function(){
    var parent = $('.targetUl'), list = $('li', parent);
    $('#showall').click(function(){
        list.show("slow");
    });
    $('.showSingle').click(function(){
        var target = '.li'+$(this).attr('target');
        list.not(target).hide("slow");
        $(target,parent).show("slow");
    });
});

#filter a {
    border: inset 1.5px grey;  
    cursor: pointer;
    padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="targetUl">
  <li class="li1 posts">posts</li>
  <li class="li2 videos">videos</li>
  <li class="li3 images">images</li>
  <li class="li4 gifs">gifs</li>
  <li class="li5 playlist">playlist</li>
  <li class="li1 posts">posts</li>
<ul>
  
<div>
  <span id="filter">                          
    <a class="btn btn-primary btn-xs active" id="showall">Show All</a>
    <a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
    <a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
    <a class="btn btn-info btn-xs showSingle" target="3">Images</a>
    <a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
    <a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>                              
  </span>
</div>

Answer 2

try this

 $(function(){
    $('#showall').click(function(){
        $('.targetLi').show("slow");
    });
    $('.showSingle').click(function()
	{
        $('.targetLi').hide("slow");
        $('.li'+$(this).attr('target')).show("fast");
    });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<span id="filter">                          
    <a class="btn btn-primary btn-xs active" id="showall">Show All</a>
    <a class="btn btn-secondary btn-xs showSingle" target="1">Posts</a>
    <a class="btn btn-danger btn-xs showSingle" target="2">Videos</a>
    <a class="btn btn-info btn-xs showSingle" target="3">Images</a>
    <a class="btn btn-warning btn-xs showSingle" target="4">GIFs</a>
    <a class="btn btn-success btn-xs showSingle" target="5">Playlists</a>                              
</span>
<ul>
	<li  class="targetLi posts li1">posts</li>
    <li  class="targetLi videos li2">videos</li>
    <li  class="targetLi images li3">images</li>
    <li  class="targetLi gifs li4">gifs</li>
    <li  class="targetLi playlist li5">playlist</li>
    <li  class="targetLi posts li1">posts</li>
</ul>

Answer 3

Changing the selector from #li1 to [id="li1"] should do the trick.

$(function(){
    $('#showall').click(function(){
        $('.targetLi').show("slow");
    });
    $('.showSingle').click(function(){
        $('.targetLi').hide("slow");
        $('[id=li'+$(this).attr('target')+']').show("slow");
    });
});