I have a FAQ section on the web site containing Q&A item which display title only until user clicks on item, then it expands to show the answer. The whole section is a 2x2 grid and each item belongs to it's cell. When I click on item in expands by switching CSS class with JS and changing properties but it affects other element in the row, so other element is still closed ass intended but recieves expanded elment's height and padding. How do I fix that?
document.querySelectorAll(".collapsible").forEach(n => n.addEventListener("click", f => {
var target = f.target;
var content = target.parentElement.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
content.className = "content";
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.className = "expanded";
}
})) .page__faq {
}
.faq {
background-color: white;
padding: 80px 0px 80px 0px;
}
.faq__container {
}
.faq__body {
}
.faq__title {
font-size: 36px;
line-height: 144%;
margin: 0px 0px 32px 0px;
}
.faq__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row-gap: 16px;
grid-column-gap: 24px;
}
.faq__item {
display: flex;
flex-direction: column;
padding: 16px 0px 16px 0px;
border-bottom: solid 1px #F2F4F7;
}
.faq_item__title_container {
display: flex;
align-items: center;
justify-content: space-between;
}
.faq_item__title {
font-family: 'SF Pro Display';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: #101828;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'SF Pro Display';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: #101828;
background-color: white;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
max-width: 535px;
font-family: 'SF Pro Text';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 133%;
}
.expanded {
max-width: 535px;
font-family: 'SF Pro Text';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 133%;
transition: max-height 0.2s ease-out;
}
.collapsible:after {
display: flex;
align-items: center;
justify-content: center;
content: url("./faq_item_plus.svg");
border-radius: 100px;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px 5px 5px;
width: 60px;
height: 60px;
background-color: white;
}
.active:after {
content: url("./faq_item_cross.svg");
border-radius: 100px;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
padding: 5px 5px 5px 5px;
width: 60px;
height: 60px;
background-color: white;
}
.faq_cost {
grid-area: 1 / 1 / 2 / 2;
}
.faq_guarantee {
grid-area: 2 / 1 / 3 / 2;
}
.faq_how_long {
grid-area: 1 / 2 / 2 / 3;
}
.faq_confidentiality {
grid-area: 2 / 2 / 3 / 3;
}<section class="page__faq faq">
<div class="faq__body_container _container">
<div class="faq__body">
<h1 class="h1 faq__title">FAQ</h1>
<div class="faq__container">
<div class="faq_cost faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">What is the cost of a mobile application?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="faq_guarantee faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">Do you provide a guarantee for the mobile application?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="faq_how_long faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">How long will development take?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Development terms directly depend on the requirements for the mobile application, the characteristics of the company, as well as the wishes of the customer.<br><br>
Average development time from start to finished application:<br>
Medium projects up to 3 months.<br>
Large projects about 4-6 months.<br>
To get a more accurate estimate of the project completion time, it is necessary to determine the main task of the application, think over its logic and functionality.
</p>
</div>
</div>
<div class="faq_confidentiality faq__item">
<div class="faq_item__title_container">
<p class="faq_item__title">I will not tell my idea, do you guarantee confidentiality?</p>
<button type="button" class="collapsible"></button>
</div>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>
</section>This is happening because all the divs share the same class 'content'. You need to either target each of those divs separately, or use the closest() method to find the nearest faq__item div and apply the style to that.
Here is how you could do it:
document.querySelectorAll(".collapsible").forEach(n => n.addEventListener("click", f => {
var target = f.target;
var container = target.closest('.faq__item');
var content = container.querySelector('.content');
if (content.style.maxHeight) {
content.style.maxHeight = null;
content.className = "content";
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.className = "expanded";
}
}));