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='//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://sodeve.net/js/sodeve.expander.js"></script>
If you follow three steps above, you should get your expandable/collapsible box working.
Good luck!
GD Star Rating
loading...
loading...
About Hardono
Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.
Incoming Search
jquery expandable box
NICE [POST]
I have tried on blog (blogspot) and it’s working very well.
nice post!
Thanks a lot I was looking for this code. Need a expandable box for blogger :))
Thank you very much! I made a c# implementation pulling from a database. Worked like a charm. 🙂