Нужно что бы при открытии блока с ответом убиралось подчеркивание нижней границы. Как я понимаю проблема с областью видимости переменных , но как исправить не знаю Работает только для верхнего блока как нужно
const mainFunction = (e) => {
const accordions = document.querySelectorAll(".accordion");
const vault = {
panel: "accordion__panel",
button: "accordion__button"
};
const classes = {
activeContent: "accordion__panel-active",
activeButton: "accordion__button-active"
};
const elementButtons = document.querySelectorAll(`.${vault.button}`);
const elementPanels = document.querySelectorAll(`.${vault.panel}`);
const accordionEvent = (accordion) => {
const button = accordion.querySelector(`.${vault.button}`);
const panel = accordion.querySelector(`.${vault.panel}`);
const buttonToggleActive = (e) => {
elementButtons.forEach((n) => {
n !== button ? n.classList.remove(classes.activeButton) : null;
});
button.classList.toggle(classes.activeButton);
};
const panelToggleActive = (e) => {
elementPanels.forEach((n) =>
n !== panel ? n.classList.remove(classes.activeContent) : null
);
panel.classList.toggle(classes.activeContent);
panel.style.setProperty("--height", `${panel.scrollHeight}px`);
// эти 2 строчки
const border = document.querySelector('.accordion__slot');
border.classList.add('accordion__slot_active');
};
button.addEventListener("click", panelToggleActive);
button.addEventListener("click", buttonToggleActive);
};
accordions.forEach((element) => accordionEvent(element));
};
document.addEventListener("DOMContentLoaded", mainFunction);
.accordions:first-of-type {
padding-top: 55px;
}
.accordions {
width: 100%;
width: 743px;
padding: 0;
}
.accordion {
width: 100%;
height: auto;
}
.accordion__slot {
width: 100%;
display: block;
border-bottom: 1px solid #D8E3FE;
}
.accordion__slot_active {
border-bottom: none;
}
.accordion__button {
border-radius: 5px;
cursor: pointer;
padding: 27px 20px 25px 55px;
width: 100%;
text-align: left;
border: none;
outline: none;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 500ms ease;
position: relative;
/**/
font-family: Quicksand;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 19px;
display: flex;
align-items: center;
letter-spacing: 0.03em;
color: #8E96B7;
background-color: #FFFFFF;
}
.accordion__button:hover {
color: #042c73;
}
.accordion__button::before {
transition: transform 500ms;
width: 14px;
height: 14px;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 37px;
left: 24px;
content: "";
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url(./images/faq-image.svg);
}
.accordion__button-active::before {
transform: translate(-50%, -50%) rotate(-180deg);
}
.accordion__button-active {
color: #760284;
}
.accordion__panel {
overflow: hidden;
max-height: 0;
visibility: hidden;
padding: 0 5px;
transition: visibility 500ms, max-height 600ms;
transition-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
}
.accordion__panel-active {
max-height: var(--height, 0);
visibility: visible;
}
.accordion-panel__content {
padding: 16px 0 52px 80px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 27px;
letter-spacing: 0.03em;
color: #8D96BD;
margin: 10px 0;
user-select: none;
max-width: 400px;
}
<div class="accordions">
<div class="accordion">
<div class="accordion__slot">
<button class="accordion__button">Reque insolens in vel?</button>
</div>
<div class="accordion__slot">
<div class="accordion__panel">
<p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
</div>
</div>
</div>
</div>
<div class="accordions">
<div class="accordion">
<div class="accordion__slot">
<button class="accordion__button">Reque insolens in vel?</button>
</div>
<div class="accordion__slot">
<div class="accordion__panel">
<p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
</div>
</div>
</div>
</div>