JavaScript Forum

**CompTronicsTec** · 03:13 PM

I found some code from a website for doing an accordion style vertical menu. It was 2 java script files and html code, so 3 files total.

In the html file i changed a few minor things. I changed the references to the images used for the menu, and added a line to define the height of on of the images.

The problem i am having is that its made to have a plus/minus sign if the menu is meant to expand. It uses a background image for all purpose and a seperate one when you mouse over. If the menu item has a plus sign and i mouse over it, then mouse over another area, the sign disapears. From then on the sign only shows when you have the mouse over it and the alternative background is showing.

I cant figure out if this is because i didnt change code in one of the 2 .js files or if this is a html issue.

Ill list the code below. Hopefully someone can point out why it does this.

**EDIT: turns out the code is long and its take many posts to fit it here. I posted the html, and if the js files are needed i will post them.**

**CompTronicsTec** · 03:11 PM

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

<script type="text/javascript">

ddaccordion.init({
 headerclass: "submenuheader", //Shared CSS class name of headers group
 contentclass: "submenu", //Shared CSS class name of contents group
 revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
 collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
 defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
 onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
 animatedefault: false, //Should contents open by default be animated into view?
 persiststate: true, //persist state of opened contents within browser session?
 toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 togglehtml: ["suffix", "<img src='http://digitalvisions.org/styles/SF_Glacier2/theme/images/plus.gif' class='statusicon' />", "<img src='http://digitalvisions.org/styles/SF_Glacier2/theme/images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
 oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
  //do nothing
 },
 onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
  //do nothing
 }
})

</script>

<style type="text/css">
.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: black url(http://digitalvisions.org/styles/SF_...ges/gnavbg.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background-image: url(http://digitalvisions.org/styles/SF_...s/gnavbtn3.gif);
height: 23px;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}
</style>
</head>

**CompTronicsTec** · 09-02-2008, 03:11 PM

HTML countinued

Code:

<body>
<div class="glossymenu">
<a class="menuitem" href="http://digitalvisions.org">Home</a>
<a class="menuitem submenuheader" href="http://digitalvisions.org/articles.php" >Articles &amp; Reviews</a>
<div class="submenu">
 <ul>
 <li><a href="http://DigitalVisions.org/articles.php">Articles List</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 </ul>
</div>
<a class="menuitem" href="http://blog.digitalvisions.org">Blog</a>
<a class="menuitem" href="http://forums.digitalvisions.org">Forums</a>
<a class="menuitem submenuheader" href="http://digitalvisions.org/Affiliates.php">Affiliates</a>
<div class="submenu">
 <ul>
 <li><a href="http://digitalvisions.org/Affiliates.php">Affiliates List</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 <li><a href="">Reserved</a></li>
 </ul>
</div>
</div>
</body>
</html>