Results 1 to 2 of 2

Thread: Accordion Content Menu Collapse and Smartphone Issues

  1. #1
    Join Date
    Jun 2013
    Thanked 0 Times in 0 Posts

    Default Accordion Content Menu Collapse and Smartphone Issues

    1) Script Title: Accordion Content Script

    2) Script URL (on DD):

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

    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,


  2. #2
    Join Date
    Dec 2008
    Portsmouth, UK
    Thanked 441 Times in 435 Posts


    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){
    				$'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
    God Loves You and will never love you less.
    If my post has been useful please donate to

Similar Threads

  1. Collapse Menu on Accordion DD Glossy
    By michmich in forum JavaScript
    Replies: 1
    Last Post: 09-27-2011, 02:07 AM
  2. Resolved Accordion Menu collapse all headers
    By MrSlash in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-19-2011, 02:27 PM
  3. Accordion Content script collapse on mouse-out?
    By jumpingflea in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-15-2010, 04:15 PM
  4. DD Accordion Menu - Collapse when going to non-expanding item
    By markox in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-08-2009, 12:14 AM
  5. Accordion Content can't collapse all
    By Sebarry in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-02-2009, 11:27 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts