1

My webapplication displays a map and a sidebar. Within the sidebar I would like to have an accordion that displays the 10 items that are also displayed as points in GeoJSON format on the map.

For the html page I have

<div id="description"> </div>

and the function initDescription() is called when the body is onload.

The function initDescription() accesses the JSON file and builds the accordion elements.

for (var i=1; i<=Object.keys(descriptionJsonFile).length; i++){

document.getElementById("description").innerHTML += 
    "<button class='accordion'>Trail Number" + wegbeschreibung[i].Titel; + "</button>" + "<div class='accordion-panel'>" + "<p>" + description[i].TrailDescription+ "<br></p>" + "</div>";

Finally, in the main JavaScript file it is handled what happens when the accordion element is clicked.

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i<acc.length; i++) {
acc[i].onclick = function() {
    console.log("accordiuon is clicked");
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
        this.classList.toggle('active');
        this.nextElementSibling.classList.toggle('show');
       }
     }
   }
   function setClass(els, className, fnName) {
    for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
    }
}

The data from the JSON file are read out correctly and the accordion elements displayed, but it does not work to click and expand the accordion elements. I already tried to get the information via document.getElementById("description").getElementsByClassName('accordion') but with no success.

Anyone how has an idea what goes wrong or what I could try?

EDIT: I found a workaround: putting the function initAccordion() directly as script within the html page at the desired position and not as an external script file, it works.

Anyone who knows why the body onload is called after the other content in the html body is loaded? Does the script directly within the html need more runtime than calling it externally?

closed as unclear what you're asking by PolyGeo Aug 3 '17 at 9:38

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    It sounds like a scope issue, can you initiate the accordion after the json loop? – NettaB Jun 26 '17 at 12:34
  • I am not sure what you mean, the accordion (the html elements that are used to build the accordion) are created while looping through the JSON file, so that for each JSON data element an accordion element is created – the_chimp Jun 26 '17 at 19:20
  • Sorry, just wild guess, can you create a jsfiddle? – NettaB Jun 26 '17 at 20:24
  • Your question seems to have morphed from what it was originally so I think you should revise it heavily so that what you wish to ask now is made clear. – PolyGeo Aug 3 '17 at 9:40

Browse other questions tagged or ask your own question.