PDA

View Full Version : Accordion Menu Problems



ellenjones6
03-13-2017, 11:44 AM
I am having trouble creating an accordion menu for a left-hand navigation panel. I tried to follow the instructions on W3Schools, but I cannot get my demo page to work. One of the problems is that I have two kinds of blocks: one type of block which does not expand, because I have not yet done the subordinate pages; and another type of block which expands (the accordion buttons). I addressed this problem by creating two different kinds of accordions and two different kinds of nonexpanding blocks.

My goal:

1. uniform vertical spacing between the blocks;
2. all blocks the same width;
3. URLs for the first level pages (i.e., Home, Trails, Habitats) indented slightly and uniformly;
4. URLs for the second level pages (i.e., Trees, Shrubs, Wildflowers) uniformly indented a few spaces more (to show that they are a subset of the first level pages).
5. the plus and minus icons lined up uniformly for both first and second order expandable blocks.

Here is the demo page: http://wildadirondacks.org/accordion-example-2.html

Sadly, as you can all-too-clearly see, the accordions are not working as desired:

● On my desktop, the accordions open in Chrome, Firefox, Opera, and Safari. On my iPad, the accordions open in Chrome, Firefox, Opera Mini, and Safari. The accordions DO NOT open in Internet Explorer on my desktop. (As far as I know, Internet Explorer is not available as an app for the iPad.) I must have messed up the code somehow when I adapted it for my purposes. How do I fix the code so that the accordions open in Internet Explorer?

● The spacing isn't correct. The spacing seems to work as desired on my desktop in Chrome, Firefox, Opera, Safari, and Internet Explorer. However, on my iPad the spacing is messed up in all browsers: Chrome, Firefox, Opera Mini, and Safari. The accordion buttons (as opposed to the blocks that do not expand) are indented more than the nonexpanding blocks.

● Something weird is going on in the Shrubs panel. Scientific names of plants are, by tradition, italicized. The italics work fine in the Tree panel, but I get this weird symbol in the shrub panel: Â . This symbol appears in Firefox, Opera, and Safari on both the desktop and the iPad. The weird symbol also appears in Chrome on the iPad, although not in Chrome on my desktop.

● Another weird symbol appears when I try to use an apostrophe: ’s. This symbol appears in place of the apostrophe with all browsers on both the desktop and the iPad.

● The plus and minus icons are not uniformly aligned. For the second level accordion buttons (Trees and Shrubs), the icons appear a few spaces to the right, compared with where they appear on the first level accordion button (Trails).

Please help! I have spent about six hours trying to figure out how to fix these problems, and I have made no progress in solving them. Also, after I get the demo navigation panel working, I then have to translate this to the web site, where the left hand navigation panel is a server side include. I expect that will be another nightmare.

Thank you, Ellen



Here is the css:


<style>
body {
background: #f0f4fa;
}
button.accordion {
background-color: #e2e9f3;
cursor: pointer;
padding-bottom: .5em;
padding-top: .5em;
width: 25%;
text-align: left;
border: none;
font-size: 1em;
transition: 0.4s;
font-family: "Times New Roman", Times, serif;

}
button.accordionSecond {
background-color: #e2e9f3;
cursor: pointer;
padding-bottom: .5em;
padding-top: .5em;
width: 25%;
text-align: left;
border: none;
font-size: 1em;
transition: 0.4s;
text-indent: .5em;
font-family: "Times New Roman", Times, serif;
}

button.accordion.active, button.accordion:hover {
background-color: #e2e9f3;
}
button.accordionSecond.active, button.accordion:hover {
background-color: #e2e9f3;
}

button.accordion:after {
width: 25%;
background-color: #e2e9f3;
content: '\002B';
color: ##000000;
font-weight: bold;
float: right;
margin-left: 0px;
border: none;
}
button.accordionSecond:after {
width: 25%;
background-color: #e2e9f3;
content: '\002B';
color: ##000000;
font-weight: bold;
float: right;
margin-left: 0px;
border: none;
}
button.accordion.active:after {
content: "\2212";
border: none;
}
button.accordionSecond.active:after {
content: "\2212";
border: none;
}

div.panel {
margin-top: .5em;
margin-bottom: .5m;
width: 25%;
background-color: #ffffff;
color: #000000;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-family: "Times New Roman", Times, serif;
}
div.panel ul li {
color: #000000;
font-family: "Times New Roman", Times, serif;
padding-right: 4px;
line-height: 1.5em;
}
div.panel ul li a {
color: #000000;
font-family: "Times New Roman", Times, serif;
padding-right: 4px;
line-height: 1.5em;
}
.searchSection {
width:25%;
padding-top: 5%;
min-height: 50px;
padding-left: 0px;
}
div.noexpandFirst {
background-color: #e2e9f3;
padding-bottom: .5em;
padding-top: .5em;
padding-left: 0px;
margin-top: 0px;
margin-bottom: .5em;
margin-right: 0px;
margin-left: 0px;
width: 25%;
text-align: left;
border: none;
font-size: 1em;
text-indent: 6px;
font-family: "Times New Roman", Times, serif;

}
div.noexpandSecond {
background-color: #e2e9f3;
padding-left: 0px;
padding-bottom: .5em;
padding-top: .5em;
margin-top: 0px;
margin-bottom: .5em;
margin-right: 0px;
margin-left: 0px;
width: 25%;
text-align: left;
border: none;
font-size: 1em;
text-indent: 1em;
font-family: "Times New Roman", Times, serif;
}
div.noexpandFirst ul li a {
color: #000000;
font-size: 1em;
font-family: "Times New Roman", Times, serif;
}
div.noexpandFirst h2 a {
color: #000000;
font-size: 1em;
}
div.noexpandFirst a {
color: #000000;
font-size: 1em;
}
div.noexpandSecond ul li a {
color: #000000;
font-size: 1em;
margin-left: 1em;
}
div.noexpandSecond h2 a {
color: #000000;
font-size: 1em;
}
div.noexpandSecond a {
color: #000000;
font-size: 1em;
}
</style>

Here is the html:


<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-hemlock-tsuga-canadensis.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-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>


Here is the Javascript:


<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>

jscheuer1
03-14-2017, 02:41 PM
The weird symbols you're seeing are most likely due to the source code being saved as utf-8 encoded, but the page being served as ISO-8859-1 (or similar) encoding. To fix that, either set the server to serve in utf-8 or add a meta content declaration to the page as shown:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
background: #f0f4fa;
}
button.accordion {
backgrou . . .

Most servers will see that and serve the page in utf-8. Some might not though. It all depends upon how the server is configured. UTF-8 is the preferred encoding these days, but many still use ISO-8859-1 (or similar), and some of those will not allow it to be overridden via the meta tag. You can set the server encoding in .htaccess or in cpanel or similar. Contact your host for details if necessary. But most servers will respect the meta tag.

Alternatively, you can find out what encoding your host is using and save your work in that. But if the meta tag works (which it likely will), UTF-8 is preferred because it supports a wider range of characters and languages.

As for the rest of it, I'll have a closer look and get back to you if anything presents itself.

jscheuer1
03-14-2017, 03:12 PM
OK, for IE, it actually works in IE 11, but in IE 9 (IE 9 emulation actually) it fails because these lines in the script (appears twice):


this.classList.toggle("active");

are not supported in IE 9. This substitute line, though longer, should work for all IE and all modern browsers:


this.className = /\bactive\b/.test(this.className)? this.className.replace(/\bactive\b/, '') : this.className? this.className + ' active' : 'active';

Once I made that change (again it appears in two places, once in each script), it worked in IE 9 emulation. This approach may have problems if additional class names are to be added and subtracted to/from the element in between times when this is done, but since that doesn't appear to be the case, should be fine for now. It can be enhanced to take care of that contingency, if required.

Even with this change, it doesn't work in IE 8 emulation, but few use that browser any longer. Some may have its emulation turned on though, but that can be prevented via a meta tag. Let me know if you want to do that.

ellenjones6
03-14-2017, 03:23 PM
Well, that was easy. I made the fix you recommended and the weird symbols went away.

Also (and this is really strange!), Internet Explorer was apparently inspired by the change you recommended to fix the weird symbols problems. The accordions now work in IE! Before I made your recommended change to fix the symbols, when I clicked on the plus sign, the block just vibrated at me and refused to open. Now, it works. Apparently the symbols thing was preventing the accordions from opening somehow.

I still have the remaining problems of spacing and alignment (see original post), but progress is being made!

Thank you so much!

ellen

PS. Is there an easy way to make the accordions "remember" that they are supposed to be open. For instance, suppose I click on the plus sign on the Trees button. The tree panel opens and I click on a tree (say, Eastern White Pine). It takes me to the Eastern White Pine page (good), but when I go back to the page I started from, the tree panel is now closed (not so good). Is there an easy way I can get the panel to stay open? Also, and this will be more complicated, I suspect, when I get all or most of the bugs out of this menu, I am going to put it into a server side include which contains the left hand navigation panel. So, every page will have the new accordion navigation panel, because when users open each page, the server side include file will be inserted. Is there a way I can fix it so that, when someone opens up one of the panels (say, the Tree panel) and follows a link on it to another page, that page will have the tree panel open? Is this even possible?

ellenjones6
03-14-2017, 03:38 PM
Yes, this works in my version of IE, which is Version 11. I don't have IE 9, so I cannot test it in that.
Many thanks. Progress is being made!

jscheuer1
03-14-2017, 03:42 PM
On the spacing of the + - symbols, first, you can combine the two accordions in style because their rules are identical in this regard. Also, instead of width, use margin so all this:


button.accordion:after {
width: 25%;
background-color: #e2e9f3;
content: '\002B';
color: ##000000;
font-weight: bold;
float: right;
margin-left: 0px;
border: none;
}
button.accordionSecond:after {
width: 25%;
background-color: #e2e9f3;
content: '\002B';
color: ##000000;
font-weight: bold;
float: right;
margin-left: 0px;
border: none;
}
button.accordion.active:after {
content: "\2212";
border: none;
}
button.accordionSecond.active:after {
content: "\2212";
border: none;
}

Can become:


button.accordion:after, button.accordionSecond:after {
background-color: #e2e9f3;
content: '\002B';
color: ##000000;
font-weight: bold;
float: right;
margin-right: 20%;
border: none;
}

button.accordion.active:after, button.accordionSecond.active:after {
content: "\2212";
border: none;
}

and seems even for those symbols (the + and -) in mobile emulation and others. The text already looks indented the way you say you want. Am I missing something there? Do you want it more pronounced?

On IE, it may have been that you you had IE 9 emulation turned on, but that you closed the browser, that usually changes emulation to default (Edge). I had no problem in IE 11 even before the encoding was changed, unless I was emulating IE 9. To prevent that happening, add this meta tag (right after the one we just added for encoding):


<meta http-equiv="X-UA-Compatible" content="IE=edge" />

ellenjones6
03-14-2017, 05:30 PM
The spacing works fine on my desktop, in all browsers. My goal is that all the first level pages (Home, Trails, Habitats, Plants, etc) should be just a tiny bit indented from the left and that the text should align vertically for all the first level pages, whether or not they are expandable buttons (like the Trails button) or non-expandable links (like Habitats). I want the text on the second level pages to be indented a bit more (to show subordination to the first level pages). The goal is that both kinds of second level blocks (expandable blocks like Trees) and non-expandable blocks like Wildflowers should be indented the same amount, so that the text all aligns up vertically.

To get it to do that, I used text-indent, which was rather messy. But when I tried to use padding-left with a percentage, the width of the blocks changed.

The text indent approach worked OK on all the browsers on the desktop.

But the alignment was all messed up on my iPad. I enclose pictures.


Image 1374 shows that the indent problem for the first level blocks. The expandable Trails block does not line up with the non-expandable Habitats block.

Image 1375 shows the indent problem for the second level blocks. The expandable blocks (trees and shrubs) do not align correctly with the non-expandable blocks (i.e., wildflowers, moss).


61536154

So, I am wondering what I should do to make the alignment work on all the browsers, on both the desktop (where it seems to work right now) and the iPad (where it does not). I also need a strategy that (1) does not mess with the width of each block, because I want the blocks to be the same width and (2) does not mess with the height of each block, because I want the blocks to be the same height.

What do you think? Is there a way to do this?

Thank you so much for all of your help.

Ellen

Beverleyh
03-14-2017, 08:26 PM
when I tried to use padding-left with a percentage, the width of the blocks changed

I also need a strategy that (1) does not mess with the width of each block

Have you heard of the box-sizing property? If you apply box-sizing: border-box; to the element with problem-padding, it will instead be "absorbed" and not add to the overall width.

ellenjones6
03-15-2017, 08:48 AM
Well, that worked! Many thanks!!

Yes, I had heard about the box-sizing thing, but it somehow did not occur to me that this was the problem here. Fiddling around with the padding with box-sizing: border-box has helped me understand it a bit better. I then had to fiddle a bit with the margins on the buttons to make the plus/minus signs align properly, but everything (buttons plus the text) seems to be aligning perfectly on all of the browsers I tested, on both the desktop and iPad.

Now that the accordions appear to be behaving themselves on the demo, I'll need to transfer this demo to my server side include, so it will work with the actual web site. I suspect that process is going to be a painful one, but I'll give it a try.

Thank you so much for your help!

The one additional thing I would like to fix is the issue of having the accordion panels stay open when the user moves to another page. Is there an easy fix for that? Is it even possible?

Thanks again, ellen

molendijk
03-16-2017, 12:26 AM
One way to leave the panels unchanged on page transition is to use a method that does not involve a menu reload. This (http://mesdomaines.nu/eendracht/hashchange) may be helpful in this regard. I wrote it a long time ago but it still works. You won't need SSI to include your menu on the pages of your site.

jscheuer1
03-16-2017, 03:37 AM
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
03-16-2017, 09:25 AM
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
03-16-2017, 03:40 PM
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
03-16-2017, 07:39 PM
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
03-16-2017, 08:40 PM
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
03-17-2017, 12:11 AM
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
03-17-2017, 12:36 AM
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
03-17-2017, 01:05 AM
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
03-17-2017, 08:53 AM
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:


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.
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.


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?

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

.

6155

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.


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.
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.
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.
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
03-17-2017, 10:12 AM
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.

ellenjones6
03-17-2017, 10:50 AM
Ah, my mistake! I see that when I tested out your revised script for making the accordions persistent, I cut and pasted an earlier version of your suggested script. I went back and am now using your latest streamlined version. (At least, I HOPE I am doing it correctly this time!)

I did make one change, to make the accordions work in IE9.

Instead of this line of code (from you latest streamlined version):


this.classList.toggle("active");

I pasted this code, which you sent me yesterday:



this.className = /\bactive\b/.test(this.className)? this.className.replace(/\bactive\b/, '') : this.className? this.className + ' active' : 'active';

With this change, which you had recommended in an earlier post, the accordions work in IE9 emulation. Of course, nothing works in IE8 or earlier, but I have decided not to worry about that.

I still get the Dreamweaver error messages (for both your latest streamlined script and that script modified with your suggested code to make it work in IE9):

6156

If you tell me that these errors are not fatal, I am not going to worry about them.

As always, thank you so much for all the time you have spent helping me.

ellen

jscheuer1
03-17-2017, 02:59 PM
OK, well I've looked into this further, and localStorage is a bit of a non starter because, if it's disabled, at least in some browsers, that will cause a fatal error for the entire script unless error checking is done that would add more bulk to the code than you probably want. So, I'm reverting to cookies. Here's the version I think we should go with, assuming you still want to support IE 9:


(function(){
var accs = document.querySelectorAll('.accordion, .accordionSecond'),
cookiename = 'accordionpersiting_73561',
persisted = document.cookie.match('(^|;)\x20*' + cookiename + '=([^;]*)'),
persisting = {}, i = accs.length;
if(persisted && (persisted = persisted[2])){
var p = persisted.split('.'), l = p.length;
while(--l > -1){persisting[p[l]] = true;}
}
function clickfunction(){
var panel = this.nextElementSibling;
this.className = /\bactive\b/.test(this.className)? this.className.replace(/\bactive\b/, '') : this.className? this.className + ' active' : '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);}
document.cookie = cookiename + "=" + pa.join('.') + "; path=/";
}, false);
})();

Now, if cookies are disabled in a given browser, the persistence will not work, but most folks have them turned on, and even if not, there will be no error. You should not be getting the same warnings in Dreamweaver with this version. If you do, it's still looking at the old code. This has no missing semi-colon (or if I missed one, it's no longer on line 23), nor does it have a function inside the loop, though it might. Technically I placed the function outside the loop and only reference it from inside it. But a strict script parser may see that as the same thing. The 'use strict' is something I'm not even all that familiar with. I do know it can be added to code and when you do it means that the script code must be interpreted in a certain way, however, it's interpreted just fine without it, and I'm not certain that without certain syntax changes that it still would be if it were added.

Later I will have a look at this IE rendering problem at page load that you mentioned.

ellenjones6
03-17-2017, 03:42 PM
Many thanks! I have incorporated the new code you suggested. I still get error messages in Dreamweaver, but I am going to assume that they are not fatal errors. I have no clue how Dreamweaver comes up with these error messages. There is a list of linting rules here ( http://jshint.com/docs/options/ ), but I don't know how they relate to the file I am working with.

Anyway, as long as the errors are not fatal, I probably shouldn't worry about them. True?

Thanks again.

jscheuer1
03-17-2017, 04:22 PM
Right, that is true. Even in the graphic you posted, they're listed as errors/warnings. They can't be both. These are just warnings. The semi-colon warning is useful if you're going to compress the code, but only sometimes, some semi-colons can be omitted. I looked into this "use strict" thing more, and think I actually like the idea now, but only for testing purposes. I tried it with the latest code and it passed. But using it in live code can make it take a little longer to parse. Out of curiosity, what warnings are you now getting other than the one about "use strict"?

ellenjones6
03-17-2017, 05:10 PM
Line 2, Column 5 Missing "use strict" statement.
Line 19, Column 53 Expected an assignment or function call and instead saw an expression.
Line 23, Column 9 The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
Line 23, Column 88 Expected an assignment or function call and instead saw an expression.

jscheuer1
03-17-2017, 06:15 PM
Thanks for posting those. Those are all nothing more than warnings. I already covered the "use strict" issue and this code passes that. As for the rest, I use shortcuts to eliminate excess coding. I use something && somethingelse(); to replace if(something){somethingelse();}

These warnings are because I eliminate the need for if and it's concomitant constructs where the checker might normally expect that. And because I use the last condition as the resultant action should the rest be true, where the checker expects to see something further done. It thinks I'm saying:


if, if, if;

But I'm really saying:


if, if, do();


As for this IE thing with the text being real big momentarily, I'm not sure, but think this highlighted style may be causing it (line 452 in stylesADKWild.css):


.asideLeft {
float: right;
background: #e7f0fd;
width: 100%;
font-size: 1.5em;



}

It's later contradicted (line 785) where the exact same selector has its font-size set to 1em, so you should be able to get rid of it without any problems. After doing so, clear the cache and reload the page(s). If that takes care of it, great! But, as I say, I cannot be sure if it's the problem. In any case, it can't hurt anything to get rid of it.

ellenjones6
03-17-2017, 06:57 PM
Thanks! I got rid of the font-size on line 452. The weird text thing in IE with the text being momentarily larger is now gone.
That was easy!

Thanks again, ellen

jscheuer1
03-18-2017, 05:40 PM
I thought about this some more, and I think it was also caused by the transition properties on the button.accordion and the button.accordionSecond selectors. Then, as the css loaded in IE, since the font size "changed", it had to transition. Other browsers didn't see this as a change because they parsed the stylesheet as a whole.

I also had a thought that it would be nice to skip the transition on the panel divisions when the page is navigated to or refreshed and persistence enabled. Doing that was a little trickier than I imagined, but not too bad once I got it. If you want to try this, add this in the stylesheet as shown:


div.panel {
margin-top: .5em;
margin-bottom: .5m;
width: 25%;
background-color: #ffffff;
color: #000000;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-family: "Times New Roman", Times, serif;
}
div.panel.notransition {
transition: none !important;
}

And use this version of the script:


(function(){
var accs = document.querySelectorAll('.accordion, .accordionSecond'),
cookiename = 'accordionpersiting_73561',
persisted = document.cookie.match('(^|;)\x20*' + cookiename + '=([^;]*)'),
persisting = {}, i = accs.length, toggleClass = accs[0] && accs[0].classList?
function(el, name){el.classList.toggle(name);} : function(el, name){
var classes = el.className.split(' '), i = classes.length, has = false;
while(--i > -1){if(classes[i] === name){has = true; classes.splice(i, 1); break;}}
!has && classes.push(name);
el.className = classes.join(' ');
};
if(persisted && (persisted = persisted[2])){
var p = persisted.split('.'), l = p.length;
while(--l > -1){persisting[p[l]] = true;}
}
function clickfunction(trans){
var panel = this.nextElementSibling;
toggleClass(this, 'active');
if(trans === false){toggleClass(panel, 'notransition');}
panel.style.maxHeight = panel.style.maxHeight? null : panel.scrollHeight + "px";
if(trans === false){panel.offsetHeight; toggleClass(panel, 'notransition');}
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], [false]);
}
window.addEventListener('unload', function(){
var pa = [], p;
for(p in persisting){persisting.hasOwnProperty(p) && persisting[p] && pa.push(p);}
document.cookie = cookiename + "=" + pa.join('.') + "; path=/";
}, false);
})();

It includes enhanced backward compatibility for IE 9's lack of the classList.toggle() function, while allowing those browsers that do support it to use it.

ellenjones6
03-18-2017, 07:22 PM
Many thanks!

I incorporated the revision to the css plus the revised script. All seems to be working fine on all browsers (with the exception, of course, of the iPad browsers -- the accordions work fine, but do not persist). But that's been true through all the changes. So, if it cannot be easily fixed, I am just not going to worry about it.

It may be just my imagination, but the movement from page to page seems to be somehow "steadier," in the sense that it feels like the left navigation menu is not changing, while the banner and new content of the new page flows in around it.

So, I am really happy with what we've ended up with. This morning, I tinkered with the styling to change the palette just a tad, in an effort to make the menu more bland and vanilla. The previous gray I was using had a bit too much blue, so I messed around with other grays to come up with something that I think looks more neutral, because it has to work with all sort of different colors in the banner and hero image.

Thanks again for all the time you have spent helping me.

Ellen

jscheuer1
03-18-2017, 07:40 PM
Smoother page transitions was the purpose for the latest change I offered. It's not quite as good in some browsers, but better in all of them, and very smooth in some, most I think.

The persistence issue in iPad is almost certainly due to having cookies turned off, either in the OS, and/or in the affected browsers. It's possible that iPad and/or certain iPad browsers have cookies off by default*. In any case though, you said it worked in Opera mini on iPad, so the device is at least capable of storing cookies.

*Generally though, cookies enabled is default and recommended.