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';
}
}

CSS Hidden Div (3)

Fig 1:

Fig 2:
Here is an example of collapsing and hiding a div that I like to use a lot. It uses a few gifs that are seen across many sites and applications, and its a great effect that suits a variety of needs, such as FAQ's or instructions.
Like the example CSS Hidden Div (2), we begin with a default displayed div, with a hidden div below that. However, to create the above effect, everything is contained in an outer div that, when collapsed(again default) has a white background (invisible), but when expanded, it creates a nice effect.
Fig 1 is the what the user sees when the page is loaded, while fig 2 is what is shown when you click the plus sign to expand.
Using a simple onclick javascript method, I just pass in the parameters to change the icon from + to -, and to show the 2 divs - 1 as a background, and 1 as the content to reveal. At the bottom of this post I include the 3 gifs I use as the expand/collapse triggers.

Here is the html:
<div id="bkgd1" class="faqs">
<div class="faqicon"><img src="images/icon_expand.gif" id="toggle_icon1" name="toggle_icon1" width="11" height="11" border="0" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
<div class="faqcontent">
<div class="faqquestion">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</div>
<!-- COLLAPSABLE AREA DEFINED HERE WITH DIV TAG -->
<div id="faq1" class="faqanswer"> --Latin Text--
<div class="faqbottom"><img src="images/icon_collapse2.gif" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
</div>
</div>
<br clear="all" />
</div>
Here is the css:
.faqs {padding:10px;background-color:#ffffff;margin-bottom:3px;}
.faqicon {float:left;padding:3px 10px 0 0;}
.faqcontent {float:left;width:750px;}
.faqquestion {font-size:14px;color:#395f97; font-weight:bold;}
.faqanswer {display:none;padding-top: 10px;}
.faqbottom {float:right;padding-top:10px;}
Here is the js:
function toggleDisplay(a,b,c) {
if (document.getElementById(a).style.display=='none' || document.getElementById(a).style.display=='' ) {
document.getElementById(a).style.display='block';
document.getElementById(b).style.backgroundColor='#f5f5f5';
document.getElementById(c).src='images/icon_collapse.gif';
} else {
document.getElementById(a).style.display='none';
document.getElementById(b).style.backgroundColor='#ffffff';
document.getElementById(c).src='images/icon_expand.gif';
}
}

CSS Tables (3)

While trying to avoid using tables for layout, I do admit to cheating the odd time to get the job done, (I used to do it a lot more). So after using tables for so long, when I actually need a table for data purposes, I had forgotten about captions, grouping rows and columns, and defining header classes, rows etc. Here is a neat example using all of these attributes. Needless to say I didn't spend too much time on making it really fancy, but the different colors illustrate the features

1) Caption - obvious
2) Defining the col groups
I originally defined 2 colgroups, 1 for teams and 1 for content. In any colgroup, you can single out individual 'col's, that overrides the settings for the overall group. This part is bolded in the html sample below.
3) I included the thead reference to give the header colums the same color as the teams colgroup. If that was not included, the red and green colors would extend to the top.
4) For the border, I used the rules attribute. I set it to just show the border between the colgroups, you can see how changing this attribute, using all its values can effect the look and feel in the post CSS Tables (2)

Here is the html (I removed the data for space):
<table class="league" cellspacing="0" rules="groups">
<caption align="top">Premier League Table</caption>
<colgroup class="teams"/>
<colgroup span="5" class="content">
<col span="4"/>
<col class="totals"/>
</colgroup>
<thead class="header">
<tr>
<td> </td>
<td>P</td>
<td>W</td>
<td>D</td>
<td>L</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
---content---
</tr>
</tbody>
</table>

Here is the css:
.league caption {font-weight:bold;padding-bottom:5px;}
.league td {padding:4px 10px;}
.teams {background-color:#b3bed0;}
.content {background-color:#84d5ac;}
.totals {background-color:#ba0401;}
.header {text-align:center;background-color:#b3bed0;}
tbody {text-align:center;}

CSS Tables (2)

Here are a few alternate versions of the table in the posting CSS Tables (3). Simply by changing the rules attribute you can change which borders are displayed.

For example, rules="rows":

rules="cols":

rules="all":

rules="none":

Rounded Corners

For the first of the rounded examples I'll be posting to this blog, I'll go with the easiest. This is recommended for a quick fix, if you have content that is not dynamic and that you are confident will not need to grow. Also, as you'll want it to work in all browsers, you will want to watch the spacing.
I'll do the example with 3 differnet colors to cover all bases you may have:
1) The background of the rest of the page
2) The border color for the rectangle
3) The color of the internal rectangle

All you do is create this image in photoshop, and set it as your background for a div or table.

Here are instructions how to make the above image in photoshop:

1) open a new file in Photoshop
2) fill the background in the light grey color
3) from the tool box, choose the Rounded Rectangle Tool
4) Define the Radius # while the tool is selected, e.g. 8 px
5) Use the white color for drawing the rounded rectangular box
6) Select the rounded rectangular box (Click ctrl while mousing over layer thumbnail in the layer palatte
7) Add a new layer
- You should see the black dashed line around the rectangle
8) go to Edit > Stroke > fill in the darker grey border color.

Thats it

CSS Hidden Div (2)

The first example I posted to hide a div using javascript and css, was a href link and can be seen here. This time I will use an image, and the image will also change to denote that the div should be expanded/collpased. As you can see from the other example, I'll keep the exact same code for hidding/showing the div. The additional step this time is to use the getElementById tag to dynamically change the source of the image.
So the additional parameter I send in the javascript method is the id of the image to change. The tricky part is when you grab the image source, you get the full path. This is not ideal for code you want to work across all environments, so the best option here is when you grab the full source, to split it up and just use the 'images/arrow-right.jpg' part of the string.
The split method creates an array of the objects that are separated by '/' in the url, therefore I just need to grab the last 2 array elements and insert a / to reconstuct the shortened url.

<script language="javascript">
function switchDiv(divId, arrowId) {

if ( document.getElementById(divId).style.display != 'none' ) {
document.getElementById(divId).style.display = 'none';
}
else {
document.getElementById(divId).style.display = 'block';
}
var imagePath = document.getElementById(arrowId).src
var splitPath = imagePath.split("/");
var path = splitPath[splitPath.length-2] + '/' + splitPath[splitPath.length-1];
if ( path != 'images/arrow-right.jpg' ) {
document.getElementById(arrowId).src = 'images/arrow-right.jpg';
}
else {
document.getElementById(arrowId).src = 'images/arrow-down.jpg';
}
}
</script>

Here is the call in the HTML:
<div class="title">
<a href="javascript:switchDiv('arrangements', 1)"><img id="1" src="images/arrow-down.jpg"/></a> Title
</div>
<div id="hiddendiv">
<table style="border:1px solid black; margin-left:10px;">
<tr><td>Div is now showing</td></tr>
</table>
</div>

CSS Tables (1)

Here is a simple css table, I have more complicated tables that I'll be uploading shortly. The main point to get across here is the border:collapse style - this means when we have a border for the rows and columns we do not have the little white space between each of them. Due to the size of the screen shot it may be hard to tell but the colum headers (th) have a background-image and if the collapse style was not set, this background would not be fluid across the top of the table

I have also include the shade image at the bottom of this post.
Here is the css:

#listings {border:1px solid #620a0b;border-collapse:collapse;}
#listings th {background-image: url(../images/shade.jpg);color:#ffffff;}
#listings td {border:1px solid #620a0b;padding:13px;color:#373b44;}
#listings td img {border:0px;}
#listings td a {text-decoration:none;color:#373b44;font-size:.9em;}
#listings td a:hover {text-decoration:underline;}

Here is the (shortened)html:

<table id="listings" width="95%">
<tr><th>Address</th><th>Details</th><th>Image</th></tr>
<tr align="left" valign="top"><td><b>50 Fell St (for lease)</b></td>
<td>17,707 Sq. Ft. Available for Lease $1.50 Industrial Gross <br /><a href="#"><img src="images/adobe_reader_20.jpg" style="float:left;"/></a><div style="float:left;margin-left:2px;"><a href="">Download PDF (253k)</a></div></td>
<td><img src="images/test_1.jpg"/></td>
</tr>
</table>
Here is the background image:

Dashed Border

This is really simple, but I wanted to just add it more as a companion post to CSS Tables (1) because it was used in the same webpage. This little box has a dashed border just to differentiate it from the main table that has the listings. The box has the same background color and border color, however the dashed effect and the bolded text just set it a little out so that the user recognizes its a unique message.

Here is the css:
#listingsMessage {
border:1px dashed #650b0b;
width:625px;
padding:10px;
color:#373b44;
font-weight:bold;
font-size:13px;
}

Here is the html:
<div id="listingsMessage">
-- text --
</div>

CSS Hidden Div

Fig 1 (Click to Enlarge)

Fig 2 (Click to Enlarge)

I got a request to do a little hidden div that would appear (and push the rest of the content down) just like it works now in gmail when you click the show search options link.

Its really just a case of setting the div style display to 'none' and calling a javascript method to switch it to 'block'.

Don't forget if you want to toggle between visibility of the item (without moving other content on the page) you would use visibility:hidden|visible.

So here is the link and javascript call from Fig1.
<a href="javascript:showOptions()">Show Search Options</a>
<script language="javascript">
function showOptions() {
document.getElementById("searchOptions").style.display='block';
document.getElementById("searchOptionsTitle").style.display='block';
}
function hideOptions() {
document.getElementById("searchOptions").style.display='none';
document.getElementById("searchOptionsTitle").style.display='none';
}
</script>
Fig 2 is initially hidden and once Show Search Options is clicked, it appears.
Here is the css:
#searchOptions {
display:none;
border:3px solid #77db81;
background-color:#b7edbc;
margin:0 10px 20px 10px;
padding:5px;
}
#searchOptionsTitle {
display:none;
margin:10px 10px 0 100px;
border-top:3px solid #77db81;
border-left:3px solid #77db81;
border-right:3px solid #77db81;
background-color:#77db81;
font-weight:bold;
line-height:20px;
}
Here is the html:
<div id="searchOptionsTitle">
Search Options
<div style="float:right;font-size:11px;line-height:20px;margin-right:5px;">
<a href="javascript:hideOptions()">Hide Search Options</a>
</div>
</div>
<div id="searchOptions">
<!-- Add components in a table -->
</div>

CSS Buttons

Here is a simple way to make your buttons through css so that they can use the overall look and feel of your site - without having to use photoshop.

Again I am taking advantage of the customized list option, so this is especially useful if you are doing UI for an application with multiple pages/buttons. Play around with colors, border colors and margins as you need to suit your site. Of course, you could always use a background image with a gradient to make it even more stylish - See the Portlets in CSS (2) example of how I use a background image with gradient.

Here is the CSS
#button {
list-style-type: none;
margin: 0;
padding: 0;
}
#button LI {
display:block;
float:left;
font-weight: normal;
text-align: center;
}
#button LI A {
color: #4f6b72;
font-size: 11px;
font-weight:bold;
font-family: arial, helvetica, sans;
text-decoration: none;
border: 1px solid #4f6b72;
padding: 5px 15px 5px 15px;
margin: 0 0 10px 0;
background-color: #cae8ea;
}
#button LI A:hover, #button2 LI A:active {
background-color: #4f6b72;
font-weight:bold;
color:#ffffff;
text-decoration: none;
}

Here is the list:
<ul id="button">
<li><a href="">Submit</a></li>
<li><a href="">Reset</a></li>
</ul>