Member Avatar for nikk

Hello Friends,
I am developing a menu using javascript wherein, I expand and collapse divs. It works fine individually; but the problem arises when I try to hide all other divs on expanding one div.
Following is the code. Pls. suggest any change if you spot any error or even any alternative way to solve this problem.

Thank You.

<head>
<script>
function hideDivs(){
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++){
arr[i].style.display = (arr[i].style.display == 'block')? 'none':'block';
}
}


function hideOtherDivs(divID){
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++){
if(arr[i].id!=divID){
arr[i].style.display = 'none';
}
else
document.getElementById(divID).style.display=(document.getElementById(divID).style.display!="block")? 'none' : 'block';
}
}
</script>
</HEAD>
<BODY onload = "hideDivs();return false;">
<a href=# onClick="hideOtherDivs('div1')">Title 1</a>
<div id="div1" style="display:block;">
Sub-menu1</div>

<a href=# onClick="hideOtherDivs('div2')">Title 2</a>
<div id="div2" style="display:block;">
Sub-menu2</div>

</body>

The function hideOtherDivs() hides all the divs.
Instead if I use follwing line, it atleast shows the sub-menu.

<a href="#" onclick="document.getElementById('div1').style.display=(document.getElementById('div1').style.display== 'block')?'none':'block';">
  • 4 Contributors
  • 3 Replies
  • 207 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for Airshow

Nikk,

In hideOtherDivs, in the else statement, try changing !="block" to =="block" .

That should get you restarted. Now you need to work out an HTML structure that shows the menu items and their subitems in an appropriate juxtaposition. This is a question of HTML and CSS, so you can put the javascript to one side for now.

If you want to see how other people have done it then there are plenty of good off-the-shelf examples out there. Google "CSS menus" or "listmatic".

Good luck.

Airshow

Member Avatar for pbn

A few things:

First, I think that formally there is a semi-colon missing at the end of lines 4 and 12.

Second, in function hideOtherDivs in the else part of the if-statement you needn't use getElementById at all, your if-statement has already determined that you have the "divID" element as arr so all you have to do is set its display style to 'block'.

The whole if-statement may be replaced so that the function looks like

function hideOtherDivs(divID)
{
  var arr = document.getElementsByTagName('div');
  for ( var i = 0 ; i < arr.length ; i++ )
    arr[i].style.display = (arr[i].id != divID) ? 'none' : 'block';
}

Third, in the hideDivs function all you want to do is hide all div:s so why check on their previous display style setting at all? Just setting it to 'none' without asking is fine:

function hideDivs()
{
  var arr = document.getElementsByTagName('div');
  for ( var i = 0 ; i < arr.length ; i++ )
    arr[i].style.display = 'none';
}
Member Avatar for essential

Here's a short example of controlling divs display using a single function.

All codes is as follows:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Live Help!</title>
<style type="text/css">
/* <![CDATA[ */
ol {
border : none;
margin : 0 0 0 1.500em;
padding : 0; }
li {
margin-top : .300em; }

/* ]]> */
</style>
<script id="script" type="text/javascript">
/* <![CDATA[ */

var hideOtherDivs;
var arr;
 
hideOtherDivs = function( divID ) {
   arr = (( document.getElementsByTagName ) ? document.getElementsByTagName( "div" ) : document.all.tags( "div" ));
   dLen = arr.length;

checkDisplay :
   for ( var i = 0; i < dLen; i++ ) { 
      if ( arr[ i ].style.display !== "block" ) {   
continue; 
      } arr[ i ].style.display = "none"; 
   } (( divID ) ? arr[ divID ].style.display = "block" : divID = null );
};
/* ]]> */
</script>
</head>
<body>
<ol>
<li><a href="javascript:void(0);" onclick="hideOtherDivs('div1')">Title 1</a> <!-- 
~ if you prefer to use the link, then use an onclick event to trigger you function --> 
<div id="div1" style="display:block;">Sub-menu1</div></li>

<li><a href="javascript:void(hideOtherDivs('div2'));">Title 2</a> <!-- But if you prefer not to use it, then you can just execute it from the link --> 

<div id="div2" style="display : block;">
Sub-menu2</div></li>
<li><a href="javascript:void(0);" onclick="hideOtherDivs( 'div3' ); ">Title 3</a>
<div id="div3" style="display : block;">
Sub-menu3</div></li>
<li><a href="javascript:void(hideOtherDivs('div4'));">Title 4</a> 
<div id="div4" style="display : block;">
Sub-menu4</div></li>
<li><a href="javascript:void(hideOtherDivs('div5'));">Title 5</a> 
<div id="div5" style="display : block;">
Sub-menu5</div></li>
</ol>
 
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.