Accordion Menu Problems

[jscheuer1]

Another way to leave the panels unchanged would be to replace:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>
<script>
var acc = document.getElementsByClassName("accordionSecond");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>

with (combines the two accordions' initializations and adds persistence via localStorage ):

<script>
(function(){
	var accs = document.querySelectorAll('.accordion, .accordionSecond'),
	storagename = 'accordionpersiting_73561',
	persisted = localStorage.getItem(storagename),
	persisting = {}, i = accs.length;
	if(persisted){
		var p = persisted.split('.'), l = p.length;
		while(--l > -1){
			persisting[p[l]] = true;	
		}
	}
	while (--i > -1) {
		accs[i].setAttribute('data-index', i);
		accs[i].onclick = function() {
			this.classList.toggle("active");
			persisting[this.getAttribute('data-index')] = /\bactive\b/.test(this.className);
			var panel = this.nextElementSibling;
			if (panel.style.maxHeight){
				panel.style.maxHeight = null;
			} else {
				panel.style.maxHeight = panel.scrollHeight + "px";
			} 
		}
		if(persisting[i]){
			accs[i].onclick.apply(accs[i]);
		}
	}
	window.addEventListener('unload', function(){
		var pa = [];
		for(var p in persisting){
			if(persisting.hasOwnProperty(p) && persisting[p]){
				pa.push(p);
			}
		}
		localStorage.setItem(storagename, pa.join('.'));
	}, false);
})();
</script>

NOTE: Most browsers these days will not set or get localStorage unless the page is live. The localStorage can be disabled, but most folks have it on, it's more reliable than cookies.

[ellenjones6]

Thank you. I'll take a closer look at this strategy after I finish migrating more of the shrub and wildflower pages to the new site.

Also, early this morning, I incorporated the demo accordion menu navigation page into my site. It wasn't as complicated as I had feared. I had to fiddle a bit, naturally, but I think I have everything working OK on all the browsers (desktop and iPad).

The web site, with the new left navigation panel with accordions is here: http://www.wildadirondacks.org/

Let me know if you see anything weird.

Thank you again for your help!

ellen

[jscheuer1]

Looks nice. I streamlined my version of the script:

<script>
(function(){
	var accs = document.querySelectorAll('.accordion, .accordionSecond'),
	storagename = 'accordionpersiting_73561',
	persisted = localStorage.getItem(storagename),
	persisting = {}, i = accs.length;
	if(persisted){
		var p = persisted.split('.'), l = p.length;
		while(--l > -1){persisting[p[l]] = true;}
	}
	function clickfunction(){
		var panel = this.nextElementSibling;
		this.classList.toggle("active");
		panel.style.maxHeight = panel.style.maxHeight? null : panel.scrollHeight + "px";
		persisting[this.getAttribute('data-index')] = !!panel.style.maxHeight;
	}
	while(--i > -1){
		accs[i].setAttribute('data-index', i);
		accs[i].addEventListener('click', clickfunction, false);
		persisting[i] && clickfunction.apply(accs[i]);
	}
	window.addEventListener('unload', function(){
		var pa = [], p;
		for(p in persisting){persisting.hasOwnProperty(p) && persisting[p] && pa.push(p);}
		localStorage.setItem(storagename, pa.join('.'));
	}, false);
})();
</script>

It really should be made external though, especially if you're using it on two or more pages.

[ellenjones6]

Thank you! I will try this out early tomorrow morning.

Yes, on externalizing the script, the W3 Schools site (where I got the instructions for the accordion script) had some instructions on that. I am using the script on every page. The site has only 51 pages at the moment, but I have over 200 more pages to migrate from my old web site. So, even though it's a small script, I probably should externalize it, right?

The W3Schools site gave some instructions on how to save the script in a separate file, and how to put in an external script reference in each page using the script. Since the code for the navigation panel is in a server side include, I only have to make the change once, which is convenient. However, I am not sure where to put the script reference. I guess it can go in the same place where I have the script at the moment (which is at the end of the code for the navigation panel). Will that work? I hope so, because if I need to put the script reference in the head of each page, I would have to modify each of the 51 pages, which I want to avoid if possible.

Any thoughts on that?

Thanks again for all your help!

ellen

By the way, I know there are some very nice accordion menu scripts on Dynamic Drive, and I took a look at them. But I needed a very plain, boring, vanilla menu which wouldn't fight with the images of trees, mountains, lakes etc. I figured that I would have had to fiddle a lot with the styling of the Dynamic Drive scripts. I thought that if I started with a very basic script and styled from there, it would be easier to achieve a plain and boring menu. I think (with a lot of help from you folks) I have achieved the ultimate in plain and boring menus, which is just what I was striving for!

[jscheuer1]

Scripts can be simpler today, especially with the use of css transitions which you are doing. And that does allow you more control when styling the rest of the look and feel of them.

As for making the script external, sounds like you have it down. For example, if you're using my latest code, you would (using a plain text editor like NotePad) save this to a file:

(function(){
	var accs = document.querySelectorAll('.accordion, .accordionSecond'),
	storagename = 'accordionpersiting_73561',
	persisted = localStorage.getItem(storagename),
	persisting = {}, i = accs.length;
	if(persisted){
		var p = persisted.split('.'), l = p.length;
		while(--l > -1){persisting[p[l]] = true;}
	}
	function clickfunction(){
		var panel = this.nextElementSibling;
		this.classList.toggle("active");
		panel.style.maxHeight = panel.style.maxHeight? null : panel.scrollHeight + "px";
		persisting[this.getAttribute('data-index')] = !!panel.style.maxHeight;
	}
	while(--i > -1){
		accs[i].setAttribute('data-index', i);
		accs[i].addEventListener('click', clickfunction, false);
		persisting[i] && clickfunction.apply(accs[i]);
	}
	window.addEventListener('unload', function(){
		var pa = [], p;
		for(p in persisting){persisting.hasOwnProperty(p) && persisting[p] && pa.push(p);}
		localStorage.setItem(storagename, pa.join('.'));
	}, false);
})();

Call it anything dot js - say save it as wildadirondacksaccordion.js and put it in some folder on the server, like maybe one called js (a good folder to create to keep all of your on site scripts in). Then replace the entire script wherever it appears (including its script tags) with:

<script src="/js/wildadirondacksaccordion.js"></script>

And yes, that would go right where the script was. Even if that's only on an include, it's still a huge resource savings.

if it's included on a number of pages the user's browser will only have to parse and cache it once and it will be available for all the pages on the site at least for that session. If it's left internal to the include, it has to be parsed and cached each time the user navigates to a page that's using it.

[molendijk]

I hope I'm wrong, but there may be a misunderstanding as to the way Ellen is supposed to include the menu on every page of her site. She writes: Since the code for the navigation panel is in a server side include, I only have to make the change once, which is convenient. If that's what Ellen really means, then she doesn't want a javascript include (extension: .js) but a server side include.
Again, I hope I'm wrong, because that might complicate things a little bit.

[jscheuer1]

I hope I'm wrong, but there may be a misunderstanding as to the way Ellen is supposed to include the menu on every page of her site. She writes: Since the code for the navigation panel is in a server side include, I only have to make the change once, which is convenient. If that's what Ellen really means, then she doesn't want a javascript include (extension: .js) but a server side include.
Again, I hope I'm wrong, because that might complicate things a little bit.

Your overthinking this Arie, at least it appears that way to me. The server side include is all of the code for the menu. The css, the HTML, and the javascript. The javascript part of it should be an external javascript file with either an absolute or a network path (if all of the pages using it are in the same folder, or relative to its location in the same way, a relative path would also work). In my previous post in this thread I gave an example using the network path. That way, no matter how many times the menu is included, no matter on how many pages, and no matter how many different locations on the server it's included to, the javascript part of it will only need to be parsed and cached once from one file located in one place on the server. If the script itself is on the include, it will be parsed and cached for each page load.

By the same token, the css should also be in an external stylesheet and referenced on the include by its absolute or network path. The only part of any server side include that cannot benefit from this sort of modularity is the HTML markup itself, that and any server side functions or code, the latter of which doesn't apply in this case as far as I know.

[molendijk]

I guess you're right John. But I was thinking that if there's a working standalone file for the menu (having internal js and css) that is supposed to be included via SSI, then what would be the reason for making the js and css external other than it being cached? Each modification we would make to the html/js/css of the file would be automatically visible on all pages where the menu is included (via SSI).
That said, I agree of course that it's a good habit to make js and css external in all cases.

[ellenjones6]

John, I made the changes you suggested to the script to get the accordions to stay open. I also externalized the script, following your suggestions. I did make a change in the script, because it was not working in the IE9 emulation. I incorporated the change you had suggested earlier to get it to work in IE9. I then retested to make sure I wasn't messing something else up.

OK, here are the results, with your changes to the script and an externalized script:

1. Desktop: accordions open and stay open when I move from page to page in the following browsers: Chrome, Opera 43, Firefox, Safari, IE11, IE10, IE9. Nothing works in IE8.
2. iPad: accordions open and stay open when I move from page to page in Opera Mini. In all other browsers (Safari, Chrome, and Firefox), the accordions open correctly, but they do not stay open when I move from page to page.

Is there an EASY fix for the failure of the iPad browsers to keep the accordions open from page to page? If not, perhaps I should abandon the idea? What do you think?

I discovered two additional problems.

1. For Internet Explorer (always the problem child), when I open a page initially and also when I move from page to page, the text on the accordion buttons does something quite odd. For one split second the text appears with a larger font, then shrinks back to the proper size. This has nothing to do with the externalization of the script or with the latest changes you suggested to make the accordions persist. I noticed it yesterday before I had made any of these changes. This little glitch was not present in the demo page. It cropped up when I incorporate the demo page navigation into my aside left server side include. So, it was something I did wrong when I made that transition. I have no clue as to whether this is easily fixable. It's not a huge issue, so maybe I should just ignore it? What do you think?
2. Dreamweaver gives me three irate errors for the externalized Javascript file. I did not get these errors on the aside left server side include before externalizing the script. I enclose a screen capture of the errors

.



Arie/John: I seem to have added to the confusion about the server side include issue by not explaining clearly. I will give it a try. It's difficult, because all you see is the code for each page AFTER the server sides includes have been included.

1. I made the left hand navigation panel a server side include to make changes to the navigation quick and easy. I made this decision based on advice I got on this forum some years ago, when I adopted the server side include approach for another web site. This approach seems to be working fine, so I would be highly reluctant to change it.
2. When I initially incorporated the new accordion navigation panel, I grabbed all the style stuff and stuffed it into my external style sheet, applying it to all views (mobile, tablet, desktop). I left the html stuff (the lists of URLs, etc), plus the accordion script in the server side include file. I tested it out (as reported earlier), and everything seemed to work (with the exceptions noted earlier, plus the nonpersisting accordion panels.
3. The next step, which I accomplished this morning, was to incorporate John's suggestion to keep the accordions open from page to page. I made that change in the script (still in the server side include) and tested it out.
4. The final step (also this morning) was to externalize the script by following John's suggestion to create a js file and put in a script reference in the server side include. I tested that out. The results are reported above. One of the problems (the strange behavior of the button text in IE) appears unrelated to externalizing the script. However, the other problem (the three nasty error messages) only appeared on the externalized script.

At this point, the remaining problems do not seem to be fatal, although I worry about those nasty, little error messages on the js file. I would like to fix every problem, but not if fixing them would potentially mess up something else that is working at the moment.

As always, I am very, very grateful for all of the time you have taken to help me. You have been very patient. If there is an easy fix to the problems that remain, please let me know. If you think that the problems are trivial and/or not easily fixable, let me know.

Thanks again, ellen


Here is the code for the external script file:

(function(){
	var accs = document.querySelectorAll('.accordion, .accordionSecond'),
	storagename = 'accordionpersiting_73561',
	persisted = localStorage.getItem(storagename),
	persisting = {}, i = accs.length;
	if(persisted){
		var p = persisted.split('.'), l = p.length;
		while(--l > -1){
			persisting[p[l]] = true;	
		}
	}
	while (--i > -1) {
		accs[i].setAttribute('data-index', i);
		accs[i].onclick = function() {
    this.className = /\bactive\b/.test(this.className)? this.className.replace(/\bactive\b/, '') : this.className? this.className + ' active' : 'active';
			persisting[this.getAttribute('data-index')] = /\bactive\b/.test(this.className);
			var panel = this.nextElementSibling;
			if (panel.style.maxHeight){
				panel.style.maxHeight = null;
			} else {
				panel.style.maxHeight = panel.scrollHeight + "px";
			} 
		}
		if(persisting[i]){
			accs[i].onclick.apply(accs[i]);
		}
	}
	window.addEventListener('unload', function(){
		var pa = [];
		for(var p in persisting){
			if(persisting.hasOwnProperty(p) && persisting[p]){
				pa.push(p);
			}
		}
		localStorage.setItem(storagename, pa.join('.'));
	}, false);
})()

;

Here is the html for the aside left server side include:

  <aside class="asideLeft">
<script type="text/javascript">

// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Enter domain of site to search.
var domainroot="www.wildadirondacks.org"

function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}

</script>

    <section class="searchSection">



<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">


<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 70%">*
<input type="submit" value="" style="border-style: none; background: url('images/Search-Icon-1.png') no-repeat; width: 24px; height: 20px">


</form>
</section>
<div class="noexpandFirst">
<a href="index.html" title="Forever Wild"><strong>HOME: FOREVER WILD</strong></a></div>
<div class="noexpandSecond">  
<a href="adirondack-geology.html" title="Adirondack Geology">Adirondack Geology
	</a></div>
  <div class="noexpandSecond">  
<a href="adirondack-wilderness.html" title="Adirondack Wilderness">Wilderness</a></div>
    <div class="noexpandSecond">  
<a href="forever-wild-the-adirondack-park.html" title="The Adirondack Park">The Adirondack Park</a> 
	</div>
<button class="accordion"><strong>TRAILS</strong></button>
<div class="panel">
    <ul>
      <li><a href="adirondack-trails.html" title="Adirondack Trails">Adirondack Trails</a>
        </li>
		<li><a href="barnum-brook-interpretive-trail.html">Barnum Brook Trail (VIC)</a> </li>
      <li><a href="boreal-life-interpretive-trail.html">Boreal Life Trail (VIC)</a> </li>
      <li><a href="heron-marsh-interpretive-trail.html">Heron Marsh Trail (VIC)
        </a></li>
      <li><a href="jenkins-mountain-trail.html">Jenkins Mountain Trail (VIC)
        </a></li>
      <li><a href="loggers-loop-trail.html">Logger’s Loop Trail (VIC)
      </a></li>
      <li><a href="woods-and-waters-trail.html">Woods & Waters Trail (VIC)</a></li>
      <li><a href="black-pond-trail.html">Black Pond Trail (VIC)</a></li>
      <li><a href="long-pond-trail.html">Long Pond Trail (VIC)</a></li>
      <li><a href="bobcat-trail.html">Bobcat Trail (VIC)</a></li>
      <li><a href="silvi-trail.html">Silvi Trail (VIC)</a></li>
      <li><a href="easy-street-trail.html">Easy Street Trail (VIC)</a></li>
      <li><a href="fox-run-trail.html">Fox Run Trail (VIC)</a></li>
      <li><a href="skidder-trail.html">Skidder Trail (VIC)</a></li>
      <li><a href="esker-trail.html">Esker Trail (VIC)</a></li>
      <li>Bloomingdale Bog Trail (Bloomingdale)</li>
      <li>Henry’s Woods Trail (Lake Placid)</li>
      <li>John Brown Farm Trails (Lake Placid)</li>
      <li>Heaven Hill Trails (Lake Placid)</li>
      <li>Penninsula Trails (Lake Placid)</li>
  </ul>
</div>
<div class="noexpandFirst"> <a href="adirondack-habitats.html" title="Adirondack Habitats"><strong>HABITATS</strong></a></div>
      <div class="noexpandSecond"> <a href="adirondack-wetlands.html" title="Adirondack Wetlands">Adirondack Wetlands</a></div>
      <div class="noexpandSecond"> <a href="adirondack-mixed-wood-forest.html" title="Adirondack Mixed Wood Forest">Mixed Wood Forest</a></div>
      <div class="noexpandSecond"> <a href="adirondack-northern-hardwood-forest.html" title="Adirondack Northern Hardwood Forest">Northern Hardwood Forest</a></div>
      <div class="noexpandSecond"> <a href="adirondack-forest-succession.html" title="Adirondack Forest Succession">Forest Succession</a></div>
      <div class="noexpandFirst"> <a href="adirondack-plants.html" title="Adirondack Plant Life"><strong>PLANTS</strong></a></div>
<button class="accordionSecond">Trees</button>
<div class="panel">
  <ul>
	<li><a href="adirondack-trees.html">Adirondack Trees</a></li>
    <li><a href="trees-of-the-adirondacks-american-beech-fagus-grandifolia.html">American Beech (<em>Fagus grandifolia</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-balsam-fir-abies-balsamea.html">Balsam Fir (<em>Abies balsamea</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-bigtooth-aspen-populus-grandidentata.html">Bigtooth Aspen (<em>Populus</em> <em>grandidentata</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-black-cherry-prunus-serotina.html">Black Cherry (<em>Prunus serotina</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-black-spruce-picea-mariana.html">Black Spruce (<em>Picea mariana</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-eastern-hemlock-tsuga-canadensis.html">Eastern Hemlock (<em>Tsuga canadensis</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-eastern-white-pine-pinus-strobus.html">Eastern White Pine (<em>Pinus strobus</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-paper-birch-betula-papyrifera.html">Paper Birch (<em>Betula papyrifera </em>var.<em>papyrifera</em>)</a></li>
	  <li><a href="trees-of-the-adirondacks-red-maple-acer-rubrum.html">Red Maple (<em>Acer rubrum</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-red-spruce-picea-rubens.html">Red Spruce (<em>Picea rubens</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-striped-maple-acer-pensylvanicum.html">Striped Maple (<em>Acer pensylvanicum</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-sugar-maple-acer-saccharum-Marshall.html">Sugar Maple (<em>Acer saccharum</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-tamarack-larix-laricina.html">Tamarack (<em>Larix laricina</em>)</a></li>
    <li><a href="trees-of-the-adirondacks-yellow-birch-betula-alleghaniensis.html">Yellow Birch (<em>Betula alleghaniensis</em>)</a></li>
	  <li><a href="adirondack-tree-list.html">Adirondack Tree List</a></li>
  </ul>
</div>

<button class="accordionSecond">Shrubs</button>
<div class="panel">
  <ul>
		<li><a href="adirondack-shrubs.html">Adirondack Shrubs</a></li>
		<li><a href="adirondack-shrubs-bog-laurel-kalmia-polifolia.html">Bog Laurel (<em>Kalmia polifolia</em>)</a></li>
		<li><a href="adirondack-shrubs-bog-rosemary-andromeda-polifolia.html">Bog Rosemary (<em>Andromeda polifoli</em>a)</a></li>
	    <li><a href="adirondack-shrubs-northern-wild-raisin-viburnum-nudum-l-var-cassinoides.html">Northern Wild Raisin (<em>Viburnum nudum</em>*var*<em>cassinoides</em>)</a></li>
	    <li><a href="adirondack-shrubs-red-elderberry-sambucus-racemosa-l-var-racemosa.html">Red Elderberry*(<em>Sambucus racemosa</em>)</a></li>
	    <li><a href="adirondack-shrubs-white-meadowsweet-spiraea-alba-var-latifolia.html">White Meadowsweet*(<em>Spiraea alba</em>*var*<em>latifolia</em>)</a></li>
  </ul>
</div>
<div class="noexpandSecond"><a href="adirondack-wildflowers.html" title="Adirondack Wildflowers">Wildflowers</a></div>
<div class="noexpandSecond"><a href="adirondack-mosses.html" title="Adirondack Moss">Moss</a></div>
<div class="noexpandSecond"><a href="adirondack-ferns.html" title="Adirondack Ferns">Ferns</a></div>

<div class="noexpandFirst">
<a href="adirondack-wildlife.html" title="Adirondack Wildlife"><strong>WILDLIFE</strong></a></div>
<div class="noexpandFirst">
	<a href="adirondack-fungi.html" title="Adirondack Fungi"><strong>FUNGI</strong></a></div>

<script src="/wildadirondacksaccordion.js"></script>
          <!-- end .asideLeft -->
  </aside>

[jscheuer1]

We could try using a cookie as backup for those browsers that are not using the persistence method in the current version. I will have time to work on that later today.
But first make sure cookies are turned on in those browsers, check also to see if they have a setting for local storage, and if so, that it also is turned on.
The errors in Dreamweaver are non-fatal and need no correction. However, getting the the function out of the loop isn't a bad idea. I did that in my streamlined version.