display multiple lists HTML/CSS

admin

Administrator
Staff member
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">
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:
&lt;ul class="sub-nav"&gt;
    &lt;li&gt;&lt;a href="#zipline"&gt;Zipline |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Wall-Climbing |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Trekking |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Scuba Diving &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="photos" id="photos"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://sportslawnews.files.wordpress.com/2011/02/zip-line-photo-2.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.treetopasia.com/sites/default/files/bangkok-zip-line-tours.jpg?1323449807" width="200" height="150"  /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

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.