Hi there javaman,
if the code in my previous post was of use to you, I would suggest that you disregard it. 
The reason for this is that it does not degrade quite correctly when javascript is disabled.
The amended code works OK.
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>show and hide divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:750px;
padding:5px;
border:3px double #999;
background-color:#eff;
margin:auto;
overflow:auto;
}
.container_height{
height:266px;
}
#buttons {
float:left;
width:250px;
margin:0;
padding:0;
list-style-type:none;
}
#buttons li {
margin:4px;
color:#333;
}
#buttons .hs {
display:block;
width:100px;
line-height:22px;
border:2px inset #999;
color:#333;
text-decoration:none;
text-align:center;
background-color:#ccc;
}
.show {
float:left;
width:478px;
height:244px;
overflow:auto;
padding:10px;
border:1px solid #999;
background-color:#fff;
}
.show p {
margin:0;
padding-bottom:10px;
text-align:justify;
}
.hide {
width:0;
height:0;
font-size:0;
margin:0;
overflow:hidden;
}
#d0,#d4 {
color:#999;
}
#d1,#d2,#d3 {
color:#333;
}
.show p {
text-indent:30px;
}
.show p:first-letter {
font-family:times,serif;
font-size:150%;
font-weight:bold;
color:#333;
}
</style>
<script type="text/javascript">
var c;
var k=0;
var j=0;
var ary=[];
var divs=document.getElementsByTagName('div');
var lnks=document.getElementsByTagName('a');
var splt;
/**************************************************
function init is provided for those who have javascript disabled
and would, otherwise, not be able to view any of the divs at all.
They would also I presume not need the links that control the divs
so that will not show up.
***************************************************/
function init() {
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
divs[c].id='d'+k++;
}
document.getElementsByTagName('container').className='container_height';
}
for(c=0;c<lnks.length;c++) {
if(lnks[c].className=='hide') {
lnks[c].firstChild.nodeValue='show';
ary[c]=true;
lnks[c].className='hs';
lnks[c].id='a'+j++;
lnks[c].onclick=function() {
splt=this.id.split('a')[1];
if(ary[splt]==true) {
this.firstChild.nodeValue='hide';
ary[splt]=false;
showDiv(splt);
return false;
}
else {
this.firstChild.nodeValue='show';
ary[splt]=true;
document.getElementById('d'+splt).className='hide';
return false;
}
}
}
}
}
function showDiv(num) {
for(c=0;c<j;c++){
document.getElementById('a'+c).firstChild.nodeValue='show';
document.getElementById('a'+num).firstChild.nodeValue='hide';
ary[c]=true;
ary[num]=false;
}
for(c=0;c<divs.length;c++) {
if(divs[c].className=='show') {
divs[c].className='hide';
}
}
document.getElementById('d'+num).className='show';
}
window.onload=function() {
init();
}
</script>
</head>
<body>
<div id="container">
<ul id="buttons">
<li>What is Lactic acid bacteria?</li>
<li><a class="hide" href="#"> </a></li>
<li>what is in div 2</li>
<li><a class="hide" href="#"> </a></li>
<li>what is in div 3</li>
<li><a class="hide" href="#"> </a></li>
<li>what is in div 4</li>
<li><a class="hide" href="#"> </a></li>
<li>What is Lorem ipsum?</li>
<li><a class="hide" href="#"> </a></li>
</ul>
<div class="show">
<p>
Refers to a large group of beneficial bacteria that have similar properties and all produce
lactic acid as an end product of the fermentation process. They are widespread in nature
and are also found in our digestive systems. Although they are best known for their role in
the preparation of fermented dairy products, they are also used for pickling of vegetables,
baking, winemaking, curing fish, meats and sausages.
</p>
</div>
<div class="show"><p>This is div two</p></div>
<div class="show"><p>This is div three</p></div>
<div class="show"><p>This is div four</p></div>
<div class="show">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
<p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>
</div>
</body>
</html>
[/color]
coothead