Wednesday, January 14, 2009

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...

5 comments:

Aravind said...

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

Rajesh R.Nair said...

he he thanks Aravind

Dean said...

greetings to all.
I would first like to thank the writers of this blog by sharing information, a few years ago I read a book called guanacaste costa rica in this book deal with questions like this one.

niz said...

Hello .. firstly I would like to send greetings to all readers. After this, I recognize the content so interesting about this article. For me personally I liked all the information. I would like to know of cases like this more often. In my personal experience I might mention a book called Generic Viagra in this book that I mentioned have very interesting topics, and also you have much to do with the main theme of this article.

User Testing Software said...

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.