PDA

View Full Version : Bullet List Accordion Menu (State Change/ Linking/ Collapse) Help



PsionicSin
08-16-2010, 08:06 PM
1) Script Title: Bullet List Accordion Menu

2) Script URL (on DD): Bullet List Accordion Menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm)

3) Describe problem: I need assistance with:


Non-expandable header hover/click state change
Non-expandable header linking (More of a syntax coding check really)
Collapsing any open headers when a non-related, non-expandable header or link is clicked.


Non-Expandable Header Hover/Click State Change:
Explained simply, I need the background of the headers to change from "titlebar.png" to "titlebar-active.png" when the mouse hovers over headers hit area.

And then for the non-expandable headers to change in appearance when clicked, as the expandable headers do. And, for what it's worth, the non-expandable headers will be linking to pages.

Non-Expandable Header Linking:
For my non-expandable headers, I simply changed the coding from:


<h3 class="menuheader">Header</h3>

to:

<h3 class="menuheader"><a href="header.html">Header</h3>

Is this the correct way to do this?

Collapsing Open Headers:
I found THIS (http://www.dynamicdrive.com/forums/showthread.php?t=38068&highlight=Bullet+Accordion) subject in the forums, but am a bit confused on how to alter it to work for me.

If you open and examine the zip file I have attached, you can see my menu navigation structure. It goes as follows:

-------------------------------------------------------------------------
Specials
About (Expandable)
- The Studio
- The Staff
Gallery
Senior Challenge (Expandable)
- About
- Vote Now
Prices (Expandable)
- Senior
- Children
- Family / Pets
- Maternity / Newborn
- Promo / Business
- Special Occasion / Wedding
- Products
FAQ
Client Log-in
Contact
-------------------------------------------------------------------------

I want the "About", "Senior Challenge", and "Prices" headers to auto-collapse when unrelated headers/ sub-menus/ links are clicked. How can I alter this code...


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (isuseractivated && index!=1) //if user clicks on any top level header that's not the 2nd one (1==2nd)
ddaccordion.collapseone("subexpandable", 0) //collapse sub menu with class="subexpandable", specifically, the first header within it
}

...to make it do that?

PsionicSin
08-17-2010, 02:49 AM
ddAdmin???

ddadmin
08-17-2010, 10:38 AM
Lets take this a step at a time. For your 1st request, I'll use the default code found on the cited script page as an example. The parts in red are new to create the effect you wanted:


<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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
}
})

jQuery(function($){ //on document.ready
var $targets=$('h3.menuheader')
$targets.mouseenter(function(){
$(this).addClass('overheader')
})
$targets.mouseleave(function(){
$(this).removeClass('overheader')
})
})


</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 .overheader{
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>

</head>

<body>

<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" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>

<p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
<p>
- <a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a><br />
- <a href="current.htm?expandable=2">Expand 3rd header within "expandable" header group</a><br />
</p>

<p>Helpful links: </p>
<p>
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
</p>

</body>
</html>

Essentially the script block in red dynamically adds the CSS class "overheader" to the header the mouse is currently over, and removes it when the mouse rolls out. This class instructs the browser to apply the desired background image to the header when applied. Does it work for you?

PsionicSin
08-17-2010, 04:50 PM
Yes. It works. I'd have never figured that out at all, either.
Ready to move on to the next thing.

And should I split this up into different posts, or is it ok to be all in one?

PsionicSin
08-18-2010, 01:47 PM
Now how about having the non-expandable headers to change the image background when clicked when clicked on?

Kind of like the hover command, but I want the change to stick when a non-expandable header is clicked...and go away when another is clicked like how the expandable ones function.

PsionicSin
08-18-2010, 02:16 PM
Inside your code:


jQuery(function($){ //on document.ready
var $targets=$('h3.menuheader')
$targets.mouseenter(function(){
$(this).addClass('overheader')
})
$targets.mouseleave(function(){
$(this).removeClass('overheader')
})
})


I added a line:


jQuery(function($){ //on document.ready
var $targets=$('h3.menuheader')
$targets.mouseenter(function(){
$(this).addClass('overheader')
})
$targets.mouseleave(function(){
$(this).removeClass('overheader')
})
$targets.click(function(){
$(this).addClass('clickheader')
})
})

...and I added this below in the CSS:


.arrowlistmenu .clickheader{ /*CSS class to apply to non-expandable header when it's clicked*/
background-image: url(titlebaractive.png);
}

I can't figure out how to make the change go away when another header is clicked though.

Basically I want a click change event for the persist state of non-expandable headers, like how the other is specific to the expandable ones, but to go away when another header is clicked.

PsionicSin
08-19-2010, 01:36 AM
Hmm ok...how does this forum work exactly? Is there a certain way I should word something to get help or did I miss something?

ddadmin
08-19-2010, 06:54 AM
Hmm ok...how does this forum work exactly? Is there a certain way I should word something to get help or did I miss something?

Nope there's nothing wrong with your wording- sometimes it just takes some time (ie: couple of days) before we're able to get back to you. I'll try and post a reply later today.

PsionicSin
08-19-2010, 11:02 AM
Nope there's nothing wrong with your wording- sometimes it just takes some time (ie: couple of days) before we're able to get back to you. I'll try and post a reply later today.

Ahh ok gotcha.

ddadmin
08-19-2010, 04:32 PM
Now how about having the non-expandable headers to change the image background when clicked when clicked on?

Kind of like the hover command, but I want the change to stick when a non-expandable header is clicked...and go away when another is clicked like how the expandable ones function.

Ok, this turned out to be a bit more tricky than I thought, but anyhoo, try the below code, which builds on top of the first modified code I posted above:


<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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
}
})

jQuery(function($){ //on document.ready
var $targets=$('h3.menuheader')
var indexofselected=ddaccordion.getCookie('general_lastexpanded') //get index of last clicked on header (limited to non expandable)
if (!isNaN(parseInt(indexofselected))){ //if found
$targets.removeClass('openheader')
$targets.eq(parseInt(indexofselected)).addClass('openheader')
}
$targets.mouseenter(function(){
$(this).addClass('overheader')
})
$targets.mouseleave(function(){
$(this).removeClass('overheader')
})
$targets.click(function(){
if (!$(this).hasClass('expandable')){ //if this isn't an expandable header
$targets.filter('.expandable').removeClass('openheader')
$(this).addClass('openheader')
var indexofselected=($targets.index($(this)))
ddaccordion.setCookie('general_lastexpanded', indexofselected+'index')
}
else{ //if this is an expandable header
ddaccordion.setCookie('general_lastexpanded', null)
$targets.not('.expandable').removeClass('openheader')
}
})
})


</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 .overheader{ /*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>

</head>

<body>

<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" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>

<p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
<p>
- <a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a><br />
- <a href="current.htm?expandable=2">Expand 3rd header within "expandable" header group</a><br />
</p>

<p>Helpful links: </p>
<p>
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
</p>


</body>
</html>

PsionicSin
08-24-2010, 03:26 AM
Actually it's not working.

With the new coding you gave, if more than one non-expandable header is clicked then they all seem to stay highlighted until I click an expandable header.

You were close, but not quite.

PsionicSin
08-25-2010, 05:32 PM
:Bump: :o

PsionicSin
08-31-2010, 04:02 PM
Any progress at all?

PsionicSin
09-02-2010, 08:05 PM
Ok I give up on the whole closing thing.

I just need to know how to make the headers a clickable link WITHOUT it changing any of the styling of the text. I want it to remain how it is.