Accordion menu with javascript

[neetu]

Hi
Am using the below javascript. Can someone tell me if I can use the
same script to for accordion menu by writing some extra code in
switchid function. If yes,how.


var ids=new Array('menu1','menu2');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}

 

[Thomas 'PointedEars' Lahn]

Am using the below javascript.

My sincere condolences.

Can someone tell me if I can use the same script to for accordion menu
by writing some extra code in switchid function.
Yes.

If yes,how.

Add the code that does it there. Preferably you would call a method that
does the accordion effect there. As you no doubt have a picture of what
your accordion should look like, given basic knowledge of HTML, CSS and DOM
scripting that should not be too hard. It would probably be best if you
created a few static test cases first so that you can see which formats need
to be applied when.

var ids=new Array('menu1','menu2');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){

Inefficient. Use

for (var i = ids.length; i--
{

instead, as order does not matter here.

hidediv(ids);

It would be better if you showed the target element while iterating, and
this was a method of a user-defined object.

}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6

Neither Internet Explorer 5.x nor Netscape 6.x supports W3C DOM Level 3.
The getElementById() method was introduced with W3C DOM Level 1, which both
support sufficiently for this. But the existence of a property does not
mean it can be called; search for isMethod().

document.getElementById(id).style.display = 'none';

It would be better if you stored references to objects one time and passed
them instead. What would only be left is checking for the `style' property
of the referred object (and maybe the shortcut property, here `display'),
and branch according to that.

}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}

None of this is going to work anywhere. You would access the `id' property
of the respective object instead (which it does not have), and NN4 does not
support CSS (it supports JSSS). You are (not) looking for

/* ... */

else if (typeof document.all == "object" && document.all)
{
/* IE 4 */
document.all[id].style.display = "none";
}
else if (typeof document.layers == "object" && document.layers)
{
/* NN 4 */
document.layers[id].display = "hide";
}

}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}

None of this is going to work either.


PointedEars