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>