Accordion Menu Problems

[ellenjones6]

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]

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]

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]

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]

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]

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]

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.

1. 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.
2. 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).

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]

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]

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]

One way to leave the panels unchanged on page transition is to use a method that does not involve a menu reload. This 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.