2011
12.28
INTERNET, TRICKS

Quickly Create Expandable / Collapsible Box in Blogger

       , , ,      0      1,170 views

This is the follow up of my previous post.

If you’re using Blogspot/Blogger, you could follow the following steps to make the expandable/collapsible box available to you:

1. Modify Template

In your blogger main menu, click Template

Then click Edit HTML

Then click Proceed

An editor with the XML content will show up. Now we need to find <head> and add the following text immediately AFTER it:

<script type='text/javascript' 
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'>
</script>

After that, we need to scroll down the editor and find </body> and add the following text immediately BEFORE it:

<script type='text/javascript' 
src='https://s3-us-west-1.amazonaws.com/sodevejs/sodeve.expander.blogger.js'>
</script>

2. Create Control DIV

This DIV is basically the area where user will click to expand/collapse your content DIV. You style the DIV anyway you like, or add whatever content inside the Control DIV as long as you follow this two rules:

  1. the class attribute must contains “sdvExp”. E.g. class=”sdvExp”
  2. it must have an ID. E.g. id=”XXXX”

Example of Control DIV

<div id="XXXX" class="sdvExp">
	<p>Test Control DIV</p>
</div>

3. Create Content DIV

This DIV is basically the box that will expand/collapse whenever user clicks the Control DIV. Content DIV only has one rule, its class property must contains “child-ID_OF_CONTROL_DIV” E.g. class=”child-XXXX”

Example of Content DIV

<div class="child-XXXX">
	<p>Test Content DIV</p>
	<p>
		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.
	</p>
</div>

I hope it helps. If you found any difficulty in implementing this, you can always drop a comment. Cheers!

GD Star Rating
loading...
Quickly Create Expandable / Collapsible Box in Blogger, 3.0 out of 5 based on 2 ratings
Worth sharing ?

Possibly Related Posts

 

Incoming Search Term

Advertise Here

 

No Comment

Add Your Comment

Your Comment