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:
- the class attribute must contains “sdvExp”. E.g. class=”sdvExp”
- 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!
About Hardono
