Accordion integrated in tab don't work unless i refresh the page

Question

I tried to insert an accordion in a tab but when i click on other menu and come back to the accordion, her javascript not working unless i refresh the page. Do you have a solution for resolve it?(It's really important for me please). I think that i need to add a line for auto-refresh accordion in javascript

You will see below the code.

Regards

 // Get all Accordion and Panel let accHeading = document.querySelectorAll(".accordion"); let accPanel = document.querySelectorAll(".accordion-panel"); for (let i = 0; i < accHeading.length; i++) { // Execute whenever an accordion is clicked accHeading[i].onclick = function() { if (this.nextElementSibling.style.maxHeight) { hidePanels(); // Hide All open Panels } else { showPanel(this); // Show the panel } }; } // Function to Show a Panel function showPanel(elem) { hidePanels(); elem.classList.add("active"); elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px"; } // Function to Hide all shown Panels function hidePanels() { for (let i = 0; i < accPanel.length; i++) { accPanel[i].style.maxHeight = null; accHeading[i].classList.remove("active"); } }

 * {box-sizing: border-box;} /* Style the Headings that are used to open and close the accordion panel */.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; margin: 0; font-weight: 300; } /* Change color of the heading and icon (on hover and click) */.active, .accordion:hover, .accordion:hover::after { background-color: #007eff; color: white; } /* Add "plus" sign (+) after Accordion */.accordion::after { content: '\002B'; color: #777; font-weight: bold; float: right; } /* Add "minus" sign (-) after Accordion (when accordion is active) */.active::after { content: "\2212"; color: white; } /* Style the accordion panel */.accordion-panel { padding: 0 18px; overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; }

 <div style="border: 1px solid lightgray;"> <h2 class="accordion">Section 1</h2> <div class="accordion-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion">Section 2</h2> <div class="accordion-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion">Section 3</h2> <div class="accordion-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion">Section 4</h2> <div class="accordion-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>

Answer 1

You need to set your js accordion code in function and call it in load and in tab click event