How to stop a button on a modal closing an accordian?

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:

// add or remove class for displaying EMAILS
function displayPanel2() {
  const panel2 = document.getElementById("panel2");
  if (!panel2.classList.contains('panel2-active')) {
  } else {
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 => == modal ? modal.classList.remove('show-modal') : false

Clearing the email text area:

// clear email field
  .addEventListener("click", function () {
    emailBox.value = '';

I also just noticed that I get a question mark appended to the end of my file name: index.html?

I’m ding something wrong.

You’re not doing anything wrong, so much as missing something. When you mentioned the question mark, i had a suspicion and when i checked your html, i see the issue.

You have those two buttons with the type submit, which means “submit this form to the given action.” As in, ping the server and get some backend data.

In this case, you’re not wanting that. So either make those buttons not be submit buttons, or tell the attached listeners to prevent the default behavior (look on for preventDefault).

Ahh, I grabbed the code from a lesson on a modal submit form. Changed the type to button and BINGO - no issues. You are the best! I love it when the solutions are simple.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.