Thorsday Research Project
Webcommgard: Subduing Loki's Web Mischief
Expand-Collapse
Header-1
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
Header-2
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
Header-3
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
Files Needed
jquery.expand_collaps.js
expand_collapse.css
Inline Code
In the head:
<link rel="stylesheet" href="styles/expand_collapse.css" type="text/css" media="screen" />
<script src="scripts/jquery.expand_collapse.js" type="text/javascript"></script>
In the body:
<div class="msg_list">
<p class="msg_head">Header-1</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor
sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor
sit amet, consectetuer adipiscing elit
</div>
<p class="msg_head">Header-3</p>
<div class="msg_body">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor
sit amet, consectetuer adipiscing elit
</div>
</div>
Special Considerations
Implementation
Source
http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html