View Full Version : Accordion Content Menu Collapse and Smartphone Issues

06-12-2013, 02:14 PM
1) Script Title: Accordion Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem: The menu is almost perfect. :cool: I am using it on this site so you can visually see the issues: http://mcdowelldentistryaz.com/dev/

Please keep in mind that I have not connected all the links, just the home, our office and dr ayoub to test links.

Here is what I need help with:

1. I want the top level links set to "clickgo", and I have it set so that the opened menu will stay open on the destination page. How do I set the js to just have it stay open rather than close and reopen on destination page. You can see this clearly if you click on the "Our Office" link.

2. After going to the "Our Office" page, if you click on the logo to go back to home or hit back button, the menu does not collapse. Is it possible to have the submenus close when going back to home page, refreshing page, or hitting back button?

3. In Android Smartphone, if you click on Office page, you get to the destination page but the menu collapses. Can't get to the submenu.

Thanks very much for your help,


06-13-2013, 01:56 PM
a cookie is being used on both pages to restore the last sum menu

this modification

allows one page to set the cookie but not read it
and the other to read it but not set it

replace the init function with

document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
var persistedheaders=ddaccordion.getCookie(config.headerclass)
ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
ddaccordion.$docbody=(window.opera)? (document.compatMode=="CSS1Compat"? jQuery('html') : jQuery('body')) : jQuery('html,body')
var $headers=ddaccordion.headergroup[config.headerclass]
var $subcontents=ddaccordion.contentgroup[config.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"}
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.readcookie && 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]
if (expandedindices.length==1 && expandedindices[0]=="-1"){ //check for expandedindices value of [-1], indicating persistence is on and no content expanded
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
$headers.each(function(index){ //loop through all headers
var $header=$(this)
if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.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)
$header.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 $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
if ($hiddenajaxlink.length==1){
$header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
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)
ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
lastexpanded={$header:$header, $content:$subcontent}
} //end check
config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
ddaccordion.transformHeader($header, config, "collapse")
//if (config["scrolltoheader"] && lastexpanded.$header)
$headers.bind("evt_accordion", function(e, isdirectclick, scrolltoheader){ //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, false, scrolltoheader) //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
$headers.bind(config.revealtype, function(){
if (config.revealtype=="mouseenter"){
var headerindex=parseInt($(this).attr("headerindex"))
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex, config.scrolltoheader)}, config.mouseoverdelay || 0)
$(this).trigger("evt_accordion", [true, config.scrolltoheader]) //last parameter indicates this is a direct click on the header
return false //cancel default click behavior
$headers.bind("mouseleave", function(){
config.oninit($headers.get(), expandedindices)
$(window).bind('unload', function(){ //clean up and persist on page unload
var expandedindices=[]
$subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
if (config.setcookie!==false && $headers.length>0){ //persist state?
expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
ddaccordion.setCookie(config.headerclass, expandedindices)

headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //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: [], //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?
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
// persiststate: true, //persist state replaced by setcookie and readcookie
setcookie: true, // true = set the persist state of opened contents within browser session? default = false
readcookie:false, //read and use the persist state of opened contents within browser session? default = true
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //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(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