CSS Hidden Div (4)

This post is a slight variation, but more of a compliment to CSS Hidden Div (3). I use the exact same js and expand/collapse images, but its a little less css. I've also included it in the little portlet I created last month. Code for that is contained in the Portlets in CSS (1) post.

As you can see its simply a list of contacts collapsed by default and you can expand or collapse as many as you like at a given time. You can get the images in the above posting.

Here is the html
<div class="contacts">
<div class="contacticon">
<img src="images/icon_expand.gif" id="toggle_icon1" name="toggle_icon1" width="11" height="11" border="0" onclick="toggleDisplay('contact1','toggle_icon1');">
</div>
<div class="contactname">Conor Cassidy</div>
<div id="contact1" class="contactinfo">
Web Designer<br />
(555) 555-1234<br />
<a href="mailto:conorcass@hotmail.com">conorcass@hotmail.com</a>
</div>
<br clear="all"/>
<div class="contacticon">
<img src="images/icon_expand.gif" id="toggle_icon2" name="toggle_icon2" width="11" height="11" border="0" onclick="toggleDisplay('contact2','toggle_icon2');">
</div>
<div class="contactname">John Doe</div>
<div id="contact2" class="contactinfo">
-- content --
</div>
<br clear="all"/>
etc
</div>
Here is the css:
.contacts {color:#000000;font-family:arial;font-size:12px;}
.contacticon {float:left;background-color: #ffffff;}
.contactname {float:left;width:200px;background-color: #ffffff;line-height:24px;
margin-top:-2px;}
.contactinfo {background-color: #ffffff;padding-left:21px;display:none;}
Here is the js:
function toggleDisplay(a,b) {
if (document.getElementById(a).style.display=='none' || document.getElementById(a).style.display=='' ) {
document.getElementById(a).style.display='block';
document.getElementById(b).src='images/icon_collapse.gif';
} else {
document.getElementById(a).style.display='none';
document.getElementById(b).src='images/icon_expand.gif';
}
}

How to Customize lists using css

So the unordered list - ul, by default gives us the standard bullet. This can be easily switched out and replaced by any image you design in photoshop/illustrator.
Applying some styles to the font can really make your list stand out.

Heres an example:
All you do in your html code is give the div an id, and make sure that each li element has the hyperlink reference
<div id="contentPanel">
<ul>
<li><a href="#">1 »</a></li>
<li><a href="#">2 »</a></li>
<li><a href="#">3 »</a></li>
</ul>
</div>

The css is where we take care of things - the lines of note here are bolded: These 2 lines are what is required to indicate you are not using the standard bullet and will be replacing it with a custom image.

.contentPanel {
background-color:#ffffff;
padding:10px;
}

.contentPanel ul {
list-style-type: none;
padding-left:0px;
margin-left:5px;
margin-top:0;
}

.contentPanel li{
background:url(../images/ul-dot.jpg) left no-repeat;
background-position:0 10px;
padding-left:15px;
padding-top:5px;
}

.contentPanel li a{
text-decoration:none;
color:#395F97;
font-weight:bold;
}

.contentPanel li a:hover{
text-decoration:none;
}

The last 2 declarations just take care of the font for the links.

You can get creative for the image, for this one I just used a pencil in photoshop to draw an arrow-like shape.