How to: create an expandable/collapsible list

kill Level: Medium, Skills required: CSS, HTML, Javascript

It is very common to use HTML unordered lists (the ul tag) on a web page. You can list links or have bullet points or make a shopping list...whatever you like. Often times the content can get very long and to declutter the look of your site you may want to make your lists expandable and collapsible.

Step 1: The first step is to write the Javascript. There will just be one function that will toggle between expanded and collapsed.

function toggle(linksId,expndId) {
var linkList = document.getElementById(linksId).style;
linkList.display=='none'?linkList.display='block':linkList.display='none';
var expndBox = document.getElementById(expndId);
expndBox.innerHTML=='[+]'?expndBox.innerHTML='[-]':expndBox.innerHTML='[+]';
}

Step 2: The second step will be to code the CSS.

.expandlist, .expandlist ul {
list-style-type: none;
}
.expandlist span {
font-family:monospace;
font-weight:normal;
font-size:70%;
vertical-align:middle;
color: black;
}
.expandlist li a{
font-weight: bold;
cursor: default;
color: black;
}
.expandlist li a:hover {
color: gray;
}
.expandlist li ul li a {
font-weight: normal;
margin-left: 20px;
color: #0000ff;
cursor: pointer;
}
.expandlist li ul li a:hover,
.expandlist li ul li a:visited {
color: #800080;
}

Step 3: The final step is the HTML for your list. First section out your list so each section has a header. Do the section by using embedded unordered lists.

<ul>
<li><a>Iowa</a>
<ul>
<li><a href="http://www.blackheartgoldpants.com/">Black Heart Gold Pants</a></li>
<li><a href="http://marcmwm.wordpress.com/">On Iowa</a></li>
</ul>
</li>
<li><a>Illinois</a>
<ul>

Next, make the class of your list "expandlist" and IDs to each of you section headers.

<ul class="expandlist">
<li><a>Iowa</a>
<ul id="iowaLinks">
<li><a href="http://www.blackheartgoldpants.com/">Black Heart Gold Pants</a></li>
<li><a href="http://marcmwm.wordpress.com/">On Iowa</a></li>
</ul>
</li>
<li><a>Illinois</a>
<ul id="illinoisLinks">
<li><a href="http://illinitalk.blogspot.com/">Illinitalk</a></li>
<li><a href="http://www.illinoisloyalty.com/">Illinois Loyalty</a></li>
</ul>
</li>
</ul>

For any section you want expanded use [-] in a span with a unique ID to show a collapse symbol by it and use style="display:block" to show the expanded list. For any collapsed section use [+] in a span with a unique ID to show the expand symbol by it and use style="display:none" for the collapsed list.

<ul class="expandlist">
<li><a><span id="iowaBox">[-]</span> Iowa</a>
<ul id="iowaLinks" style="display:block">
<li><a href="http://www.blackheartgoldpants.com/">Black Heart Gold Pants</a></li>
<li><a href="http://marcmwm.wordpress.com/">On Iowa</a></li>
</ul>
</li>
<li><a><span id="illinoisBox">[+]</span> Illinois</a>
<ul id="illinoisLinks" style="display:none">
<li><a href="http://illinitalk.blogspot.com/">Illinitalk</a></li>
<li><a href="http://www.illinoisloyalty.com/">Illinois Loyalty</a></li>
</ul>
</li>
</ul>

Finally, add in an onclick event to triggle the toggle function using the span id and list id.

<ul class="expandlist">
<li><a onclick="toggle('iowaLinks','iowaBox')"><span id="iowaBox">[-]</span> Iowa</a>
<ul id="iowaLinks" style="display:block">
<li><a href="http://www.blackheartgoldpants.com/">Black Heart Gold Pants</a></li>
<li><a href="http://marcmwm.wordpress.com/">On Iowa</a></li>
</ul>
</li>
<li><a onclick="toggle('illinoisLinks','illinoisBox')"><span id="illinoisBox">[+]</span> Illinois</a>
<ul id="illinoisLinks" style="display:none">
<li><a href="http://illinitalk.blogspot.com/">Illinitalk</a></li>
<li><a href="http://www.illinoisloyalty.com/">Illinois Loyalty</a></li>
</ul>
</li>
</ul>

To see this in action look at the links on Fight For Iowa.