accordeon

[ErEs]

Re: Accordion Bug

hello, i managed to put an acordeon on my website using custom code.
it is working, as long as i am on that site, where the acordeon is placed. when i navigate to a different (project-)site and come back the acordeon is always fully unfolded. there is still no way to close it in that situation, which normally works fine. the only thing that helps is refreshing the site.

how can i fix it? is there something wrong with my code?
-> www.sanderrobert.de/approaching-visual/

<script>

 var toggleStates = [];
    var buttons = document.getElementsByClassName("panelbutton");
    var panels = document.getElementsByClassName("panel");
    
    function ApplyButtonState(index)
    {
        var panel = panels[index];
        
        if (toggleStates[index])
        {
            panel.style.maxHeight = '800px';
            panel.style.margin = null;
        }
        else
        {
            panel.style.maxHeight = 0;
            panel.style.margin = 0;
        }
    }

        
    if (buttons.length != panels.length)
    {
        console.error('panelbutton and panel count mismatch!');
    }
    else
    {
        for (var i = 0; i < buttons.length; i++) {
     
            var button = buttons[i];
            toggleStates.push(false);
            
            ApplyButtonState(i);
                
            button.toggleStateIndex = i;
            button.addEventListener("click", function(evt) {
                    
            
                for (var j = 0; j < toggleStates.length; j++)
                {
                    var toggleStateIndex = evt.currentTarget.toggleStateIndex;
                    
                    var foldedOut = toggleStateIndex === j;
                    if (foldedOut && toggleStates[j])
                        foldedOut = false;
               
                    toggleStates[j] = foldedOut;
                    ApplyButtonState(j);
                }
         
            });
        }
    }
  

</script>

[arminunruh]

you need to use the newpageshown event to execute your javascript everytime a page is loaded

i think adding this to your js should work:

window.laytheme.on("newpageshown", function(){
// reset variables
toggleStates = [];
buttons = document.getElementsByClassName("panelbutton");
panels = document.getElementsByClassName("panel");
ApplyButtonState();
});