Expand and Collapse Container

Expand and collapse option through JS and CSS
Follow steps
1. Copy this code in notepad
2. Save your note pad as .html or .htm
3. Open with browser... solution is ready :)


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<style type="text/css">
h4{
color:#719500;
}
</style>
</head>

<script type="text/javascript">
var collapseDivs, collapseLinks;

function createDocumentStructure (tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement &&
(siblingContainer = document.createElement('div')) &&
siblingContainer.style)
{
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer,

nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';

collapseDivs[i] = siblingContainer;

createCollapseLink(element, siblingContainer, i);
}
else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}

function createCollapseLink (element, siblingContainer, index) {
var span;
if (document.createElement && (span = document.createElement

('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode

(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('[+]'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
}
}

function collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = '[+]';
}
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = '[-]';
}

if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}




</script>
<script type="text/javascript">
<!--
function popup(url)
{
var width = 1200;
var height = 927;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<script type="text/javascript">
window.onload = function (evt) {
createDocumentStructure('h4');
}
</script>

<style type="text/css">
h4{
color:#719500;
}
</style>

<div style="width:70%; float:left;">
<DIV>
<H4>Question? </H4>
<P>Answer</P>
</DIV>
</div>

You can write number of questions and answer, this is one of the best solution from the user experience angle. This helps to make layout without having vertical scroll bar.

Thanks folks.. coming days.. ll add some more interesting stuffs here...

Comments

Aravind said…
Useful article man and the code is ready to run. I stole your code, will use appropriately .. . .
Hi,

The site is very informative for software professional about expand and collapse option through js and css and deploying all files individually. Knowledge of them will be beneficial to you. Thanks a lot.