Wednesday, May 13, 2009

Expanding/Collapsing a list using javascript


Expand/Collapse feature should be necessary if we are having a very long list of items such as links in a webpage.

You can refer the all links page where I have used this feature.

It is done by using javascript which enables expanding/collapsing without requiring page refresh.

For doing this we need to do below steps,

1. Put the list content inside a div tag .
2. Put the + or - sign inside a span tag with anchor tag.
3. Onclick event of the anchor tag of + or - sign should call a javascript function which will toggle display property of style object of div tag.

Find below the sample code which is used in the sample


<h3>QA and QTP Automation (<a href="javascript:ExpandCollapse('divQA','spanQA')"><span id="spanQA">-</span></a>) </h3>

<div id="divQA" style="display:block;" >
list should come here
</div>





Find below javascript function which should be called on clicking + or - sign,

<script language="javascript" type="text/javascript">
function ExpandCollapse(divContent,spanSymbol) //javascript code for displaying resources into "+" and "-"
{
if(document.getElementById(divContent).style.display =="none")
{
document.getElementById(divContent).style.display ="block";
document.getElementById(spanSymbol).innerHTML = "-";
}
else
{
document.getElementById(divContent).style.display ="none";
document.getElementById(spanSymbol).innerHTML ="+";
}
}
</script>



setting none for style.display will hide the div contents and block will show the div contents.

Below part of code is used for showing the relevant section of the page on clicking the link using name of anchor tag.

<a href="#sectionQA">QA and QTP Automation</a>

<a name="sectionQA"> </a>



More Articles...

No comments:

Search This Blog