Show content on click

I am looking for a way to make a bulltet list only show after the header is clicked.

example: Web Hosting Package Comparison from Network Solutions

If you click the feature you get the details. I am trying to do something of this aspect on my site, under the “email marketing” section.

I would like to only see the bullets when the headers are clicked. (ie. create and send, manage lists, etc…)

http://www.mymarketingsolutions.com/Site/webmarketing.html

Thanks in advance.

This should work.

It uses the PrototypeJS library.
Read to code comments for detailed explanation.

  1. I used PrototypeJS to get an array of the elements using the css .clickable class;
  2. 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&#8230;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>

This code should work with your markup structure:

<!-- 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>

Thank you… but I have made the changes and the click works - but on load the lists are still showing.

EDIT! Sorry I made a mistake!

After:


   links.each(function(l){

Add:


   l.next().hide();

This will set the lists to display none, only if javascript is active as it should.

Now the elements do not hide, and are not clickable.

Read my post edit please.

Awesome - works Great thank you…

Now to just figure the best way to make sure the user knows to click these for full details.

You already have the hand cursor indication but if necessary you can add extra visual feedback by styling the :hover state of the clickable elements:


.clickable:hover { color: #f00; }

This will turn the text color to red when the mouse is over the clickable elements.

What is all this JavaScript talk in the CSS forum? :wink:

Could you use a CSS only version like this: http://feelerdealer.com/chooseOne.html

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)

If someone gets that css only version to work in Internet Destroyer, please tell me :smiley:
Works awesome in any other browser.