2011
12.11

jQuery makes a lot of things easier. I have blogged before about creating collapsible/expandable box. But jQuery make that blog post obsolete and too ‘dirty’.

After consulting with Google, it pointed out a great website that teaches tips & tricks on Javascript. I modified his project to suit what I need. Below is the code, and after it, you could find the Live Demo.

 

Original Code

<html>
	<head>
		<title>Test JQuery</title>
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
		<script type="text/javascript">
			$(function() {
			$('div.sdvExp')
				.css("cursor","pointer")
				.attr("title","Click to expand/collapse")
				.click(function(){
					$(this).siblings('.child-'+this.id).toggle();
				});
			$('div[class^=child-]').hide();
		});
		</script>
	</head>
	<body>
		<div class="sdvExp" id="div1">
			<p>Lorem Ipsum</p>
		</div>
		<div class="child-div1">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui,
			vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
			turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. 
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
			Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum.
			Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. 
			Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. 
			Suspendisse laoreet volutpat adipiscing.
		</div>
	</body>
</html>

Live Demo

Expandable/Collapsible Box Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.

Making it Work in WordPress

To make the box working in WordPress, please observe the following source code and follow the three steps:

<!-- STEP 1: Create the control DIV. Its class name should be sdvExp. It also must have an ID (e.g. sdvExp1958) -->
<div class="sdvExp" style="background:#333;border:1px" id="sdvExp1958"><p>Expandable/Collapsible Box Demo</p></div>

<!-- STEP 2: Create the content DIV. Its class name should be child-{control-div-ID} (e.g. child-sdvExp1958) --> 
<div class="child-sdvExp1958">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.
</div>

<!-- STEP 3: Add the following code -->
<script type="text/javascript" src="https://s3-us-west-1.amazonaws.com/sodevejs/sodeve.expander.js"></script>

If you follow three steps above, you should get your expandable/collapsible box working.

Good luck!

GD Star Rating
loading...
Worth sharing ?

Incoming Search Term

jquery expandable box

Advertise Here

2 Trackbacks

 

 

5 comments so far

Add Your Comment
  1. NICE [POST]

  2. I have tried on blog (blogspot) and it’s working very well.

  3. nice post!

  4. Thanks a lot I was looking for this code. Need a expandable box for blogger :))

  5. Thank you very much! I made a c# implementation pulling from a database. Worked like a charm. :)