I'm a newbie and I want to know how to display multiple list. For example, I have many categories like Scuba diving, Zipline, Trekking, and Wall climbing. In each categories, it has pictures associated.
<h1><a href="http://jsfiddle.net/gyt6W/" rel="nofollow">jsfiddle</a></h1>
<strong>CSS:</strong>
<pre class="lang-css prettyprint-override">
<strong>HTML:</strong>
<pre class="lang-html prettyprint-override">
But I'm confused where to put the photos for the remaining categories. How to hide them when a specific category (i.e. zipline) is active or selected by the user. Any ideas how to do that? Help is much appreciated. Thanks.
<h1><a href="http://jsfiddle.net/gyt6W/" rel="nofollow">jsfiddle</a></h1>
<strong>CSS:</strong>
<pre class="lang-css prettyprint-override">
Code:
/* gallery display */
.photos {
display: block;
}
.photos ul {
list-style: none;
}
.photos ul li {
width: 210px;
height: 310px;
background: #FFF;
display: inline;
list-style: none;
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 3px 10px 3px;
;
text-align: left;
color: #000;
-moz-border-radius: 3px;
border-radius: 3px;
}
.photos ul li p {
color: #838181;
font-size: 12px;
padding: 0 5px 0 5px;
}
.photos ul li span {
font-weight:bold;
padding: 10px 5px 0 5px;
}
.sub-nav {
font-size: 12px;
background: #fff;
margin: 0 0 15px 0;
padding: 15px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.sub-nav ul {
list-style:none;
margin: 0 5px 0 5px;
padding: 0;
}
.sub-nav li {
display:inline;
}
<strong>HTML:</strong>
<pre class="lang-html prettyprint-override">
Code:
<ul class="sub-nav">
<li><a href="#zipline">Zipline |</a></li>
<li><a href="#">Wall-Climbing |</a></li>
<li><a href="#">Trekking |</a></li>
<li><a href="#">Scuba Diving </a></li>
</ul>
<div class="photos" id="photos">
<ul>
<li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a></li>
<li><a href="#"><img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /></a></li>
<li><a href="#"><img src="http://sportslawnews.files.wordpress.com/2011/02/zip-line-photo-2.jpg" width="200" height="150" /></a></li>
<li><a href="#"><img src="http://www.treetopasia.com/sites/default/files/bangkok-zip-line-tours.jpg?1323449807" width="200" height="150" /></a></li>
</ul>
</div>
But I'm confused where to put the photos for the remaining categories. How to hide them when a specific category (i.e. zipline) is active or selected by the user. Any ideas how to do that? Help is much appreciated. Thanks.