It uses the PrototypeJS library.
Read to code comments for detailed explanation.
I used PrototypeJS to get an array of the elements using the css .clickable class;
On each iteration over the said array and attach click events to each one to toggle the visibility of its sibling, the ul element.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.clickable { cursor: hand; cursor: pointer; }
.clickable:hover { color: red; }
</style>
</head>
<body>
<h1>E-Mail Marketing</h1>
<h2 class="clickable">Create and send eye catching emails</h2>
<ul style="display: none;">
<li> Design your own or have us help you design effective, eye-catching emails
</p>
</li>
<li> Personalized email messages
</p>
</li>
<li> Schedule release date and time
</p>
</li>
<li> Only YOUR name is shown on the entire message.
</p>
</li>
<li> We are invisible to your recipient.
</p>
</li>
<li> WE DO IT FOR YOU…freeing up your time to be more productive
</p>
</li>
<li> Manage Lists and Subscribers
</p>
</li>
</ul>
<h2 class="clickable">Client Management</h2>
<ul style="display: none;">
<li> Signup Forms - Subscription management
Custom Fields - Add more personalization </li>
<li> Suppression Lists
</p>
</li>
<li> Flexible importing and exporting
</p>
</li>
</ul>
<h2 class="clickable">Powerful Analytics</h2>
<ul style="display: none;">
<li>Real-time Reporting - Activity timeline </li>
<li>Google Analytics </li>
<li>Forward to a friend </li>
<li>Compare Campaigns - Spot trends </li>
<li>Open and Click Through Tracking </li>
</ul>
<h2 class="clickable">Affordable Pricing </h2>
<ul style="display: none;">
<li>$10.00 per campaign + $.03 each recipient </li>
<li>Volume discounts</li>
</ul>
<!-- load prototype js library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript">
/* get an array of every element with the .clickable class */
var links = $$('.clickable');
/* iterate over the previous array */
links.each(function(l){
/* attach a click event to each element */
Event.observe(l,'click',function(e){
/* stop event propagation */
Event.stop(e);
/* toggle array element sibling visibility */
l.next().toggle();
});
});
</script>
</body>
</html>
<!-- load prototype js library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript">
/* get an array of every h3 element inside a div */
var links = $$('div h3');
/* iterate over the previous array */
links.each(function(l){
l.className = 'clickable';
console.log(l);
/* attach a click event to each element */
Event.observe(l,'click',function(e){
/* stop event propagation */
Event.stop(e);
/* toggle array element's parent sibling visibility - how confusing is this... */
console.log(l.up().next().toggle());
});
});
</script>
u almost made me happy imaginekitty, because i was looking for such a thing but unfortunately, it doesnt work in some browsers (checked on IE8 and below, didnt work)