Show lists that have multiple ids JavaScript

Question

I have a series of unordered lists. Each li has an id of a certain category, e.g. category 1 or 2.

I have a Javascript method that allows the user to only show lis that have a certain id. However, I want some lis to have more than one id.

For example, there are Categories and Projects. A Project can belong to more than one category. How do I account for this in my HTML and JS? I have tried to give one li more than one id, but it ignores id="3" and just takes account of the first id provided which is id="1"

I hope this makes sense. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="">
<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script><![endif]--> 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> 

<script type="text/javascript">
        function ani(){
            document.getElementById('filters').className ='.filters';
        }
</script>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         var content = document.getElementsByClassName('content');

         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'inline';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<style>
.filters
{
   position: relative; margin-top: -10px;
   animation-name: slide-down; animation-duration: 1s;
   -moz-animation-name: slide-down; -moz-animation-duration: 1s;
   -webkit-animation-name: slide-down; -webkit-animation-duration: 1s; 
}


@keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-moz-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-webkit-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}
</style>

</head>

<body>

<header>

    <div class="logo"><img class="logo" src="images/logo2.png"></div>

</header>

<section id="work">

<section id="filters" onclick="ani()">
<a href="#" onclick="toggleVisibility('3');">Web Design and Mobile Applications</a>
<a href="#">Service Design and Digital Branding</a>
<a href="#">Physical Computing</a>
<a href="#">Responsive Environments</a>
<a href="#">Data Visualisation</a>
<a href="#">Interactive Storytelling</a>
</section>

    <ul>
        <li id="1" id="3" class="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li id="2" class="content"><a href="#"><img src="images/work/2.jpg"></a></li>
        <li id="3" class="content"><a href="#"><img src="images/work/3.jpg"></a></li>
        <li id="4" class="content"><a href="#"><img src="images/work/4.jpg"></a></li>
        <li id="5" class="content"><a href="#"><img src="images/work/5.jpg"></a></li>
        <li id="6" class="content"><a href="#"><img src="images/work/6.jpg"></a></li>
        <li id="1" class="content"><a href="#"><img src="images/work/1.jpg"></a></li>
        <li id="2" class="content"><a href="#"><img src="images/work/8.jpg"></a></li>
        <li id="3" class="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li id="4" class="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li id="5" class="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li id="6" class="content"><a href="#"><img src="images/work/2.jpg"></a></li>
    </ul>

</section>

<script type="text/javascript" src="/js/retina/retina.js"></script>

</body>

</html>

You shouldn't have more than one element with a given `id` or more than one `id` in a certain element. You'll have to resort to something else, like classes or `data-` attributes. — acdcjunior, Jun 17 '13 at 23:16

score 2 · Answer 1 · 2013-06-17T23:39:44.050

2

id should be unique on the page, and any element can have only one.

You can, however, set more than one class on an element, and any given class doesn't have to have any CSS associated with it.

You could have, for example:

<li id="li1" class="green projects rubbish">text...</li>

where .green sets green text and the other classes serve to categorise the <li>

edited Jun 17 '13 at 23:39

answered Jun 17 '13 at 23:21

Why did you choose `rubbish` for a class name? – John Dvorak Jun 17 '13 at 23:24
@frenchie Thanks for the edit, but in this case the quotes aren't required as there are no spaces in the `id` – Jun 17 '13 at 23:38
@MikeW: ok, no prob, had always assumed you needed the quotes when working with HTML tags. – frenchie Jun 18 '13 at 00:07

score 0 · Answer 2 · edited May 23 '17 at 10:25

I believe that this is what you are trying to achieve

CSS

.filters {
    position: relative;
    margin-top: -10px;
    animation-name: slide-down;
    animation-duration: 1s;
    -moz-animation-name: slide-down;
    -moz-animation-duration: 1s;
    -webkit-animation-name: slide-down;
    -webkit-animation-duration: 1s;
}
@keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-moz-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-webkit-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}

HTML

<header>
    <div class="logo">
        <img class="logo" src="images/logo2.png">
    </div>
</header>
<section id="work">
    <section id="filters">
        <a href="#">Web Design and Mobile Applications</a>
        <a href="#">Service Design and Digital Branding</a>
        <a href="#">Physical Computing</a>
        <a href="#">Responsive Environments</a>
        <a href="#">Data Visualisation</a>
        <a href="#">Interactive Storytelling</a>
    </section>
    <ul>
        <li id="1" data-category="3" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="2" data-category="3" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
        <li id="3" data-category="3" class="content">
            <a href="#"><img src="images/work/3.jpg"></a>
        </li>
        <li id="4" class="content">
            <a href="#"><img src="images/work/4.jpg"></a>
        </li>
        <li id="5" class="content">
            <a href="#"><img src="images/work/5.jpg"></a>
        </li>
        <li id="6" class="content">
            <a href="#"><img src="images/work/6.jpg"></a>
        </li>
        <li id="7" class="content">
            <a href="#"><img src="images/work/1.jpg"></a>
        </li>
        <li id="8" class="content">
            <a href="#"><img src="images/work/8.jpg"></a>
        </li>
        <li id="9" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="10" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="11" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="12" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
    </ul>
</section>

Javascript

/*jslint maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    var filters = document.getElementById("filters"),
        anchors = filters.getElementsByTagName("a");

    function ani() {
        document.getElementById("filters").className = "filters";
    }

    filters.addEventListener("click", ani, false);

    function toggleVisibility(selectedTab) {
        var content = document.getElementsByClassName("content"),
            length = content.length,
            i;

        for (i = 0; i < length; i += 1) {
            if (content[i].dataset.category === selectedTab) {
                content[i].style.display = "inline";
            } else {
                content[i].style.display = "none";
            }
        }

    }

    anchors[0].addEventListener("click", function () {
        toggleVisibility("3");
    }, false);

}());

On jsfiddle

Fixes were to make sure all ids were unique, add data-category to items that you want to group, remove the . from the className filters, separate javscript from HTML. The other bits are cosmetic, ran through jslint, added use strict, put all the javascript in a self executing closure to prevent global namespace pollution.

score -1 · Answer 3 · answered Jun 17 '13 at 23:28

Not the greatest solution, but it works for two different categories:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="">
<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script><![endif]--> 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--> 

<script type="text/javascript">
        function ani(){
            document.getElementById('filters').className ='.filters';
        }
</script>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         var content = document.getElementsByName('content');

         for(var i=0; i<content.length; i++) {
              if(content[i].className == selectedTab) {
                    content[i].style.display = 'inline';
              } else if(content[i].id == selectedTab) {
                    content[i].style.display = 'inline';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<style>
.filters
{
   position: relative; margin-top: -10px;
   animation-name: slide-down; animation-duration: 1s;
   -moz-animation-name: slide-down; -moz-animation-duration: 1s;
   -webkit-animation-name: slide-down; -webkit-animation-duration: 1s; 
}


@keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-moz-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}

@-webkit-keyframes slide-down
{
    from { margin-top: -70px; } to { margin-top: -10px; }
}
</style>

</head>

<body>

<header>

    <div class="logo"><img class="logo" src="images/logo2.png"></div>

</header>

<section id="work">

<section id="filters" onclick="ani()">
<a href="#" onclick="toggleVisibility('3');">Web Design and Mobile Applications</a>
<a href="#">Service Design and Digital Branding</a>
<a href="#">Physical Computing</a>
<a href="#">Responsive Environments</a>
<a href="#">Data Visualisation</a>
<a href="#">Interactive Storytelling</a>
</section>

    <ul>
        <li class="1" id="3" name="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li class="2" name="content"><a href="#"><img src="images/work/2.jpg"></a></li>
        <li class="3" name="content"><a href="#"><img src="images/work/3.jpg"></a></li>
        <li class="4" name="content"><a href="#"><img src="images/work/4.jpg"></a></li>
        <li class="5" name="content"><a href="#"><img src="images/work/5.jpg"></a></li>
        <li class="6" name="content"><a href="#"><img src="images/work/6.jpg"></a></li>
        <li class="1" name="content"><a href="#"><img src="images/work/1.jpg"></a></li>
        <li class="2" name="content"><a href="#"><img src="images/work/8.jpg"></a></li>
        <li class="3" name="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li class="4" name="content"><a href="#"><img src="images/work/9.jpg"></a></li>
        <li class="5" name="content"><a href="#"><img src="images/work/7.jpg"></a></li>
        <li class="6" name="content"><a href="#"><img src="images/work/2.jpg"></a></li>
    </ul>

</section>

<script type="text/javascript" src="/js/retina/retina.js"></script>

</body>

</html>

class names can't start with a number http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — Jasen, Jun 18 '13 at 00:01

Show lists that have multiple ids JavaScript

3 Answers3