Can't collapse others without <ul>

**parboy** · 10-25-2009, 08:42 PM

1) Script Title: Accordion Menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem: I haven't been able to get the current expanded sub menu to collapse when a top-nav without sub-nav items is selected. It seems to require a list below the nav selected in order to collapse another nav list.

I tried to use onClick="ddaccordion.collapseall('header_class'); return false" but it didn't work.

Site: http://inkari.com/rmcj/bios/coblentz.php
links for Client List, Law Links and Contact are built but none will collapse the expanded link (Attorneys, Sample Cases).

Thanks for any advice.

**stringcugu** · 10-25-2009, 11:26 PM

try the page agai

part one

<html><head><title>EXTRÁK - kataporta.net</title>
<META content="webdesign, web, design, weblapkészítés, honlapkészítés">
<LINK href="haver.css" type=text/css rel=stylesheet>
<style>
#divMenu0 {position:absolute; top:10px; left:150px; visibility:hidden;z-index:21; font-family:arial,helvetica,sans-serif; font-size:12px; font-weight:bold;}
#divMenu1 {position:absolute; top:0px; left:250px; visibility:hidden; z-index:21;font-family:arial,helvetica,sans-serif; font-size:12px; font-weight:bold;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){
this.ns=(document.layers)?true:false;
this.Ver4=(document.getElementById)?true:false;
this.ie=(document.all)?true:false;
return this
}
var bw=new lib_bwcheck()
var tMove=10;
var tSpeed=20
var tMoveOnScroll=true
var tShow=20
function makeMenu(obj,nest,show,move,speed){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.Ver4?document.getElementById(obj):bw.ie?document.all[obj]:bw.ns?eval(nest+'document.'+obj):0;
this.style=bw.Ver4?document.getElementById(obj).style:bw.ie?document.all[obj].style:bw.ns?eval(nest+'document.'+obj):0;
this.x=this.style.left||this.style.pixelLeft||this.el.offsetLeft||0
this.y=this.style.top||this.style.pixelTop||this.el.offsetTop||0
this.state=1;
this.go=0;
this.mup=b_mup;
this.show=show;
this.mdown=b_mdown;
this.height=bw.ns?this.style.document.height:this.el.offsetHeight
this.moveIt=b_moveIt;
this.move=move; this.speed=speed
this.obj = obj+"Object"; eval(this.obj +"=this")
}
var px = bw.ns||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.style.left=this.x+px; this.style.top=this.y+px;}
function b_mup(){
if(this.y>-this.height+this.show){
this.go=1; this.moveIt(this.x,this.y-this.move)
setTimeout(this.obj+".mup()",this.speed)
}else{this.go=0; this.state=1}
}
//Menu out
function b_mdown(){
if(this.y<eval(scrolled)){
this.go=1; this.moveIt(this.x,this.y+this.move)
setTimeout(this.obj+".mdown()",this.speed)
}else{this.go=0; this.state=0}
}
function moveTopMenu(num){
if(!oMenu[num].go){
if(!oMenu[num].state)oMenu[num].mup()
else oMenu[num].mdown()
}
for(i=0;i<oMenu.length;i++){
if(i!=num && !oMenu[i].state){ oMenu[i].mup()}
}
}
function checkScrolled(){
for(i=0;i<oMenu.length;i++){
if(!oMenu[i].go){
y=!oMenu[i].state?eval(scrolled):eval(scrolled)-oMenu[i].height+oMenu[i].show
oMenu[i].moveIt(oMenu[i].x,y)
}
}
setTimeout('checkScrolled()',40)
}
function topMenuInit(){
oMenu=new Array()
oMenu[0]=new makeMenu('divMenu0',"",tShow,tMove,tSpeed)
oMenu[1]=new makeMenu('divMenu1',"",tShow,tMove,tSpeed) //*
scrolled=bw.ns?"window.pageYOffset":"document.body.scrollTop"
for(i=0;i<oMenu.length;i++){
oMenu[i].moveIt(oMenu[i].x,-oMenu[i].height+oMenu[i].show)
oMenu[i].style.visibility='visible'
}
bw.ns?checkScrolled():window.onscroll=checkScrolled;
}
onload=topMenuInit;
</script>
</head>
<body bgcolor=#cc0011 marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>

<div id="divMenu0">
<a href="javascript://">Link1</a><br><br>
<a href="javascript://">Link2</a><br><br>
<a href="javascript://">Link3</a><br><br>

<a href="javascript://">Link4</a><br><br>
<a href="#" onclick="moveTopMenu(0); return false">MENU1</a>
</div>
<div id="divMenu1">
<a href="javascript://">Link1</a><br><br>
<a href="javascript://">Link2</a><br><br>
<a href="javascript://">Link3</a><br><br>
<a href="javascript://">Link4</a><br><br>
<a href="#" onmouseover="moveTopMenu(1)">MENU2</a>
</div>

<head>
<script language="JavaScript1.2">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
</script>

<style>
.curhand{cursor:hand}
</style>
<script language="javascript">
function displayit(paragraph,title,imgmenu){
if (document.all[paragraph].style.display=='none')
{document.all[paragraph].style.display="block";
document.all[imgmenu].src="URL PIC 2"}
else {document.all[paragraph].style.display="none";
document.all[imgmenu].src="URL PIC 2"}
}
function setoverstyles(paragraph,imgmenu,title){
if (document.all[paragraph].style.display=='none')
{document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecorationUnderline='true'}
else {document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecorationUnderline='true'}
}
function setoutstyles(paragraph,imgmenu,title){
if (document.all[paragraph].style.display=='none')
{document.all[title].style.textDecoration='none';
document.all[imgmenu].src="URL PIC 1"}
else {document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecoration='none'}
}
sw=0;
function displayall(){
if (sw==0) {swall.innerText="Hide all";document.all['x'].style.display='block';sw=1;
for (i=1;i<=5;i++)
{ xmenu='menu'+i ; ximg='imgmenu'+i ;
if (document.all[xmenu].style.display=='none')
{document.all[xmenu].style.display="block";document.all[ximg].src="URL PIC 2"}}}
else {swall.innerText="Show all";document.all['x'].style.display='none';sw=0;
for (i=1;i<=5;i++)
{xmenu='menu'+i;ximg='imgmenu'+i;
if (document.all[xmenu].style.display=='block')
{document.all[xmenu].style.display="none";document.all[ximg].src="URL PIC 1"}}}
}
function displayinline(text){
if (document.all[text].style.display=="none"){document.all[text].style.display="inline"}
else {document.all[text].style.display="none"}
}
</script>

**stringcugu** · 10-25-2009, 11:27 PM

part two

<style>
* {margin:0; padding:0; }
body
{font-family:Verdana, Ariel, Helvetica, sans-serif;
font-size:12px;
color: #000;
background: #555; }
#container
{position:relative;
/* margin: 0 auto; Hide centering */
width: 1024px;
background: #fff url(../images/menu_bg.gif) repeat-y; }
div#sub_container {
padding-bottom: 20px; }
div#sub_wrapper
{width: 1024px;
height: 755px;
background: url(../images/rmcd_bg_3.jpg) no-repeat; }
div#sub_wrapper_bio
{width: 1024px; }
div#banner
{position:relative;
width: 1024px;
height: 132px; }
img#reflect
{float:left; }
div#banner_top
{float:right;
width: 766px;
height: 90px;
background: #d0d9cc;
line-height: 142px;
padding-left: 48px; }
div#banner_bottom_bio
{float:left;
width: 732px;
height: 42px;
line-height: 52px;
padding-left: 42px;
padding-right: 40px;
background: url(../images/bio_bottom_shadow.gif) repeat-x; }
div#menu_top
{width: 210px;
height: 36px;
background: #00b3c5; }
div#menu_top_bio
{width: 210px;
height: 36px;
background: #b2c359; }
div#bio
{float:right;
font-size: 11px;
color: #000;
width: 814px;
padding-bottom: 48px;
background: #fff; }
span.title
{font-size: 19px;
text-transform: uppercase; }
div#prose
{float:left;
margin-left: 90px;
margin-top: 29px;
width: 264px; }
#prose h1
{font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 24px; }
#prose h1+p
{font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 18px;
margin-top: 0px;}
#prose p
{font-family:Verdana, Ariel, Helvetica, sans-serif;
line-height: 18px;
margin-top: 16px; }
#prose img
{margin-top: 10px;
margin-bottom: -10px;
border:none; }
#prose a:link {color: #3B569F; }
#prose a:visited {color: #593B9F; }
#prose a:hover {color: #37008F; }
.shadow
{position: absolute;
top: 158px;
left: 635px;
width: 146px;
height: 166px;
background: url(http://inkari.com//images/bio_shadow.jpg) right top no-repeat; }
.biopic
{position: absolute;
top: 161px;
left: 638px; }
div#bullets
{float:left;
width: 200px;
margin-left: 90px;
margin-top: 190px; }
#bio #bullets li
{font-family:Verdana, Ariel, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
list-style: none;
line-height: 18px;
margin-top: 16px; }
#bio #bullets li li
{font-family:Verdana, Ariel, Helvetica, sans-serif;
font-weight: normal;
text-transform: none;
list-style: disc;
line-height: 18px;
margin-top: 0px; }
div#bio_head
{position:absolute;
top: 96px;
left: 654px; }
div#search
{float:right;
margin-top: 12px;
margin-right: -50px; }
#searchbox
{position:relative;
background-color: #D0D9CC;
vertical-align:top;
font-size: 11px;
padding: 2px 0;
border: 1px solid #b4bbbf;
margin-right: -6px; }
#search-btn
{position:relative;
top: 0px;
left:0px;
padding-right: 34px;
padding-bottom: 40px; }
div#footer
{clear:both; }
div#copyright
{height: 42px;
background: #CFCFCF; }
#copyright p
{font-family:Verdana, Ariel, Helvetica, sans-serif;
line-height: 42px;
font-size:10px;
color: #3d505a;
text-align: center; }
#copyright a:link, #copyright a:visited
{color:#3d505a;
text-decoration: none; }
#copyright a:hover
{color: #000; }
span.note {
background: #B5FF00; }
span.pdf {
font-size: 10px; }
div#clients div#prose {
width: 276px; }
div#clients div#bullets {
width: 276px;
margin-top: 85px; }
#clients ul {
margin-bottom: 30px; }
#clients h1 {
font-family: Georgia, 'Times Roman', serif;
font-size: 22px;
color: #000;
margin-bottom: 30px; }
#clients #prose h2, #clients #bullets h2 {
font-family: Georgia, 'Times Roman', serif;
font-size: 18px;
color: #004e95;
margin-bottom: 18px; }
#clients #prose li.first, #clients #bullets li.first {
font-family:Verdana, Ariel, Helvetica, sans-serif;
font-weight: bold;
color: #536466; }
#clients #prose li, #clients #bullets li {
font-family:Verdana, Ariel, Helvetica, sans-serif;
font-size: 10px;
color: #3f5657;
line-height: 1.65;
list-style: none;}
#clients li.first {
font-weight: bold;
color: #536466; }
li.pubtit {
margin-left: 15px;
list-style:none !important; }
</style>
<style>
* {margin: 0; padding: 0; }
.arrowlistmenu /* contains menu */
{float:left;
width: 210px;
z-index: 100; }
.arrowlistmenu .menuheader /* top nav style */
{font-family:Verdana, Ariel, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
display:block;
line-height: 36px; /* Centers text vertically in topnav background, must match height value */
width: 210px;
height: 36px; /* Height of topnav background, must match line-height value */
margin-bottom: 2px; /* Sets gap between topnav backgrounds, 2px removes gap */
color: #fff;
text-decoration: none;
text-indent: 36px;
padding: 2px 0 2px 0; /* Adds background above/below topnav links */
background: #808080;
cursor: pointer; }
.arrowlistmenu ul
{position:relative;
margin-bottom: 2px;} /* butts top of list background to bottom of topnav background */
.arrowlistmenu li /* style list items */
{list-style:none; }
.arrowlistmenu ul li a /* style list links */
{font-family:Verdana, Ariel, Helvetica, sans-serif;
font-size:13px;
line-height: 18px;
text-indent: 36px;
display:block;
background: #808080;
padding-top: 2px;
padding-bottom: 8px; } /* adds 8px to bottom of list items, li+li rule removes all but last one */
.arrowlistmenu a:link {text-decoration:none; color:#fff; }
.arrowlistmenu a:visited {text-decoration:none; color:#fff; }
.arrowlistmenu ul li a:hover, .arrowlistmenu ul li:hover {background: #666666; } /* rollover for list items */
.arrowlistmenu .menuheader:hover {
background: #666666;
border-bottom: 0px solid #808080; } /* rollover for topnav items */
.arrowlistmenu a:active, .arrowlistmenu ul li a:active
{outline: none; }
.arrowlistmenu ul li a.current /* current list item matches rollover state */
{background: #4C566F; }
.arrowlistmenu .current /* current topnav matches rollover state */
{background: #6f6f6f; }
</style>

<script type="text/javascript" src="/rmcj/js/search.js"></script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.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>

**stringcugu** · 10-25-2009, 11:29 PM

part 3

<script>
//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'
//Version 1.3: April 3rd, 08':
//**1) Script now no longer conflicts with other JS frameworks
//**2) Adds custom oninit() and onopenclose() event handlers that fire when Accordion Content instance has initialized, plus whenever a header is opened/closed
//**3) Adds support for expanding header(s) using the URL parameter (ie: http://mysite.com/accordion.htm?headerclass=0,1)
//April 9th, 08': Fixed "defaultexpanded" setting not working when page first loads
//Version 1.4: June 4th, 08':
//**1) Added option to activate a header "mouseover" instead of the default "click"
//**2) Bug persistence not working when used with jquery 1.2.6
//Version 1.5: June 20th, 08':
//**1) Adds new "onemustopen:true/false" parameter, which lets you set whether at least one header should be open at all times (so never all closed).
//**2) Changed cookie path to site wide for persistence feature
//**3) Fixed bug so "expandedindices" parameter in oninit(headers, expandedindices) returns empty array [] instead of [-1] when no expanded headers found
//**1) Version 1.5.1: June 27th, 08': Fixed "defaultexpanded" setting not working properly when used with jquery 1.2.6
//Version 1.6: Oct 3rd, 08':
//**1) Adds new "mouseoverdelay" param that sets delay before headers are activated when "revealtype" param is set to "mouseover"
//**2) Fixed bug with "onemustopen" param not working properly when "revealtype" is set to "click"
//Version 1.7: March 24th, 09': Adds a 3rd revealtype setting "clickgo", which causes browser to navigate to URL specified inside the header after expanding its contents.
//Version 1.7.1: May 28th, 09': Fixed issue that causes margins/paddings in accordion DIVs to be lost in IE8
var ddaccordion={

contentclassname:{}, //object to store corresponding contentclass name based on headerclass
expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
this.toggleone(headerclass, selected, "expand")
},
collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
this.toggleone(headerclass, selected, "collapse")
},
expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
var $=jQuery
var $headers=$('.'+headerclass)
$('.'+this.contentclassname[headerclass]+':hidden').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},
collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
var $=jQuery
var $headers=$('.'+headerclass)
$('.'+this.contentclassname[headerclass]+':visible').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},
toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
var $=jQuery
var $targetHeader=$('.'+headerclass).eq(selected)
var $subcontent=$('.'+this.contentclassname[headerclass]).eq(selected)
if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
$targetHeader.trigger("evt_accordion")
},
expandit:function($targetHeader, $targetContent, config, useractivated, directclick){
this.transformHeader($targetHeader, config, "expand")
$targetContent.slideDown(config.animatespeed, function(){
config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
if (targetLink) //if this header is a link
setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
}
})
},
collapseit:function($targetHeader, $targetContent, config, isuseractivated){
this.transformHeader($targetHeader, config, "collapse")
$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
},
transformHeader:function($targetHeader, config, state){
$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
}
else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
else if (config.htmlsetting.location=="suffix")
$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
},
urlparamselect:function(headerclass){
var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
if (result!=null)
result=RegExp.$1.split(',')
return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name + "=" + value + "; path=/"
},

**stringcugu** · 10-25-2009, 11:29 PM

part 4

init:function(config){
document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('<\/style>')
jQuery(document).ready(function($){
ddaccordion.urlparamselect(config.headerclass)
var persistedheaders=ddaccordion.getCookie(config.headerclass)
ddaccordion.contentclassname[config.headerclass]=config.contentclass //remember contentclass name based on headerclass
config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
config.revealtype=config.revealtype || "click"
config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
if (config.revealtype=="clickgo"){
config.postreveal="gotourl" //remember added action
config.revealtype="click" //overwrite revealtype to "click" keyword
}
if (typeof config.togglehtml=="undefined")
config.htmlsetting={location: "none"}
else
config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
var $subcontents=$('.'+config["contentclass"])
if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
expandedindices=[]
if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
expandedindices=[0]
$('.'+config["headerclass"]).each(function(index){ //loop through all headers
if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $(this).html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
$('<span class="accordprefix"></span>').prependTo(this)
$('<span class="accordsuffix"></span>').appendTo(this)
}
$(this).attr('headerindex', index+'h') //store position of this header relative to its peers
$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
var $subcontent=$subcontents.eq(index)
var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
if (config.animatedefault==false)
$subcontent.show()
ddaccordion.expandit($(this), $subcontent, config, false) //Last param sets 'isuseractivated' parameter
lastexpanded={$header:$(this), $content:$subcontent}
}//end check
else{
$subcontent.hide()
config.onopenclose($(this).get(0), parseInt($(this).attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
ddaccordion.transformHeader($(this), config, "collapse")
}
})
$('.'+config["headerclass"]).bind("evt_accordion", function(e, isdirectclick){ //assign custom event handler that expands/ contacts a header
var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
if ($subcontent.css('display')=="none"){
ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
}
lastexpanded={$header:$(this), $content:$subcontent}
}
else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
}
})
$('.'+config["headerclass"]).bind(config.revealtype, function(){
if (config.revealtype=="mouseenter"){
clearTimeout(config.revealdelay)
var headerindex=parseInt($(this).attr("headerindex"))
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
}
else{
$(this).trigger("evt_accordion", [true])
return false //cancel default click behavior
}
})
$('.'+config["headerclass"]).bind("mouseleave", function(){
clearTimeout(config.revealdelay)
})
config.oninit($('.'+config["headerclass"]).get(), expandedindices)
$(window).bind('unload', function(){ //clean up and persist on page unload
$('.'+config["headerclass"]).unbind()
var expandedindices=[]
$('.'+config["contentclass"]+":visible").each(function(index){ //get indices of expanded headers
expandedindices.push($(this).attr('contentindex'))
})
if (config.persiststate==true && $('.'+config["headerclass"]).length>0){ //persist state?
expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
ddaccordion.setCookie(config.headerclass, expandedindices)
}
})
})
}
}
</script><!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>

**stringcugu** · 10-25-2009, 11:30 PM

part 5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.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: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //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: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "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">
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>

<script type="text/javascript" src="/rmcj/js/accordian.js"></script>
<script type="text/javascript" src="/rmcj/js/dddaccordian.js"></script>


<title>Peter D. Coblentz :: Rosenthal Murphey Coblentz & Donahue</title>
<link rel="stylesheet" type="text/css" href="../css/rmcd_pgs.css" />
<link rel="stylesheet" type="text/css" href="../css/menu.css" />



<style type="text/css">
div#sub_container {
overflow: hidden;
background: url(http://inkari.com//images/bio_menu_pic.jpg) no-repeat;
background-position: 0 462px; }
</style>
</head>
<body>

**stringcugu** · 10-25-2009, 11:31 PM

part 6

<div id="container">
<div id="sub_container">
<div id="sub_wrapper_bio">
<div id="menu_bg_pic">
<div id="banner">
<img id="reflect" src="http://inkari.com/rmcj/images/rmcd_reflect.gif" width="210px" height="132px" alt="RMCD logo" />
<div id="banner_top">
<img src="http://inkari.com/rmcj/images/bio_menu_pic.jpgf" width="644px" height="23px" alt="Rosenthal, Murphey Coblentz & Donahue logo" />
</div> 
<div id="banner_bottom_bio">
<img src="http://inkari.com//rmcj/images/municipal...gif" width="514px" height="18px" alt="Municipal Law, Zoning Law and School Law" />
http://inkari.com/rmcj/images/bio_bottom_shadow.gif
<div id="search">
<form method="post" action="http://webhawks.org/~dm160cwidait3289/cgi-bin/keyword_search/search_engine.cgi">
<p><inputid="searchbox" class="default-value" type="text" size="16" name="keywords" maxlength="80" value="  Search this site" />
<input id="search-btn" type="image" value="Search"src="/rmcj/images/search_button.gif" alt="search button" /></p>

</form>
</div> 
</div> 
</div> <div id="menu_col">
<div class="arrowlistmenu"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td>
<p align="left">
<span id="swall" onmouseover="this.style.textDecorationUnderline='true'" onmouseout="this.style.textDecoration='none'" class="curhand" onclick="displayall()">
Show All</span></td><br>
</tr>
</table><br>
<p id='x' style="display:none"></p>

<div onmouseover="setoverstyles('menu1','imgmenu1','title1')" onmouseout="setoutstyles('menu1','imgmenu1','title1')" class="curhand" onclick="displayit('menu1','title1','imgmenu1')" id="title1" style="position:static; width:150; height:15">
<img id="imgmenu1" border="0" src="URL PIC 1" width="12" height="12">
Persian Musics</div>
<blockquote>
<span id="menu1" style="display:none;">Item 1<br>
Item 2<br>
Item 3<br>
Itrm 4<br>
Item 5<br>
Item 6<br>

Item 7</span>
</blockquote>
<p></p>
<div onmouseover="setoverstyles('menu2','imgmenu2','title2')" onmouseout="setoutstyles('menu2','imgmenu2','title2')" class="curhand" onclick="displayit('menu2','title2','imgmenu2')" id="title2" style="position:static; width:150; height:15">
<img id="imgmenu2" border="0" src="URL PIC 1" width="12" height="12">
Kharegi Musics</div>
<p></p>
<blockquote>
<span id="menu2" style="display:none;">Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>

Item 5<br>
Item 6<br>
Item 7</span>
</blockquote>
<p></p>
<div onmouseover="setoverstyles('menu3','imgmenu3','title3')" onmouseout="setoutstyles('menu3','imgmenu3','title3')" class="curhand" onclick="displayit('menu3','title3','imgmenu3')" id="title3" style="position:static; width:150; height:15">
<img id="imgmenu3" border="0" src="URL PIC 1" width="12" height="12">
Persian Videos</div>
<p></p>
<blockquote>
<span id="menu3" style="display:none;">Item 1<br>
Item 2<br>

Item 3<br>
Item 4<br>
Item 5<br>
Item 5<br>
Item 6</span>
</blockquote>
<p></p>
<div onmouseover="setoverstyles('menu4','imgmenu4','title4')" onmouseout="setoutstyles('menu4','imgmenu4','title4')" class="curhand" onclick="displayit('menu4','title4','imgmenu4');" id="title4" style="position:static; width:150; height:15">
<img id="imgmenu4" border="0" src="URL PIC 1" width="12" height="12">
Kharegi Videos</div>
<p></p>

<blockquote>
<span id="menu4" style="display:none;">
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5<br>
Item 6</span>
</blockquote>
<p></p>
<div onmouseover="setoverstyles('menu5','imgmenu5','title5')" onmouseout="setoutstyles('menu5','imgmenu5','title5')" class="curhand" onclick="displayit('menu5','title5','imgmenu5')" id="title5" style="position:static; width:150; height:15">

<img id="imgmenu5" border="0" src="URL PIC 1" width="12" height="12"> Funyy
Videos</div>
<p></p>
<blockquote>
<span id="menu5" style="display:none;">
Item 1<br>
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5</span>

</blockquote>////////
<div class="arrowlistmenu">
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>

<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>

<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>

</ul>
<h3 class="menuheader expandable">FeedBacktnn</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>
<h3 class="menuheader expandable">FeedBack5</h3>

<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >FeedBackFree JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul><h3 class="menuheader expandable">FeedBack</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >FeedBackFeedBack</a></li>

<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>
</div>
</div> 

</div> 
</div> 
</div> 
</div> 
<div id="footer">
<div id="copyright">
<p><a href="mailto:info@rmcj.com">Contact RMC&D</a>         © Copyright 2009 Rosenthal, Murphey, Coblentz & Donahue         <a href="mailto:webmaster@rmcj.com">Webmaster</a></p>

</div> 
</div> </div> 
</body>
</html>
</body>
</html>

**stringcugu** · 10-25-2009, 11:31 PM

it has a other one
and a scrollbar at the top

**parboy** · 11-08-2009, 12:07 AM

Originally Posted by parboy

1) Script Title: Accordion Menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem: I haven't been able to get the current expanded sub menu to collapse when a top-nav without sub-nav items is selected. It seems to require a list below the nav selected in order to collapse another nav list.

I tried to use onClick="ddaccordion.collapseall('header_class'); return false" but it didn't work.

Site: http://inkari.com/rmcj/bios/coblentz.php
links for Client List and Contact are built but neither will collapse the expanded link (Attorneys, Sample Cases).

Thanks for any advice.

Thanks for the reply - I think you mis-understood my question. I'll rephrase:
If a top navigation link such as "Client List" (which has no sub-navigation links) is selected, the current expanded link does not collapse. Instead, the page displays the Client List, but the previous top navigation section remains expanded.

Try clicking on any page under "Attorneys" and then select "Client List". You should see the client list page but the Attorneys section remains expanded, though it should collapse since it's no longer active.

Thread: Can't collapse others without <ul>

Thread Tools

Search Thread

Can't collapse others without <ul>

Not the problem

Bookmarks

Bookmarks

Posting Permissions