I have 2 buttons that act as an accordion though the behavior is not exactly what I want. Regardless, the 2nd “accordion” displays checkboxes for emails addresses which you can add to a textarea on Submit. I have 3 buttons in that area associated with the email text area: 1. to copy, 2. to toggle all the checkboxes on & off, and 3. to clear the email text box.
I created the modal for the 3rd option of clearing the text area asking the user if they are sure. I can click off the modal to close the modal and the accordion stays open. But if I click either the No or Yes buttons, the accordion closes.
My accordion opens and closes by adding a class (panel2-active, panel2-inactive) in a different function. The HTML for the model is outside of the HTML for the accordion though it does reference the email text field that is inside of the accordion. Are the modal buttons somehow triggering the event listener for the accordion button?
I do not see any errors in the console. I have a copy of the app in CodePen and when it happens there the display panel goes white with the words “Not Found” in the upper left. Does that sound familiar to anyone? Here is a link to the code pen with code snippets below for the accordion and modal:
Accordian
// add or remove class for displaying EMAILS
function displayPanel2() {
const panel2 = document.getElementById("panel2");
if (!panel2.classList.contains('panel2-active')) {
panel2.classList.add("panel2-active");
panel2.classList.remove("panel2-inactive");
} else {
panel2.classList.add("panel2-inactive");
panel2.classList.remove("panel2-active");
}
}
accordian2.addEventListener("click", displayPanel2);
Modal code:
const close = document.getElementById('close');
const open = document.getElementById('email-clear');
const modal = document.getElementById('modal');
open.addEventListener('click', () => modal.classList.add('show-modal'));
close.addEventListener('click', () => modal.classList.remove('show-modal'));
window.addEventListener('click', e =>
e.target == modal ? modal.classList.remove('show-modal') : false
);
Clearing the email text area:
// clear email field
document
.getElementById("clearEmail")
.addEventListener("click", function () {
emailBox.value = '';
emailBox.focus();
modal.classList.remove('show-modal')
});