Accordian Drop down opens both sides

Developer Support CMS Development
1

I’m trying to create an FAQ section with 2 columns horizontally. I woulld like only one side to open and the other side to stay closed on the dropdown.

I haven’t been able to figure it out.

Here’s the CSS:

.il_faq{
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}
.il_faq .content{
max-width: 732px;
margin: 0 auto;
}
.il_faq .content h2{
font-size: 48px;
font-weight: 500;
line-height: 1.25;
text-align: center;
margin-bottom: 22px;
}
.il_faq .content,
.il_faq .content p{
font-size: 18px;
line-height: 1.33;
color: #FFF;
}
.il_faq .content a{
font-weight: 500;
}
.il_faq .content p{
text-align: center;
}

/* Links Color */
.il_faq.dark-text .content a{
color: #000;
}
.il_faq.light-text .content a{
color: #FFE66F;
}
/* Content Color */
.il_faq.dark-text .content,
.il_faq.dark-text .content p,
.il_faq.dark-text .content h2,
.il_faq.dark-text .cta .cta_button{
color: #000;
}
.il_faq.light-text .content,
.il_faq.light-text .content p,
.il_faq.light-text .content h2,
.il_faq.light-text .cta .cta_button{
color: #FFF;
}

.il_faq .groups{
display: grid;
grid-template-columns: repeat(2, 50fr);
grid-column-gap: 68px;
margin-top: 39px;
}
.il_faq .groups .group:not(:last-child){
margin-bottom: 1px;
}
.il_faq .groups .group .group-title{
padding: 35px 35px 35px 0;
font-size: 18px;
font-weight: 500;
line-height: 1;
position: relative;
cursor: pointer;
border-bottom: 1px solid #C9CCCF;
}
.il_faq .groups .group .group-title:after{
content: ‘’;
position: absolute;
width: 21px;
height: 21px;
top: 50%;
right: 0;
transform: translateY(-50%);
background-image: url(‘data&colon;image/svg+xml;utf8,<svg width=“28” height=“17” viewBox=“0 0 28 17” fill=“none” xmlns=“SVG namespace”><path d=“M24.2461 3L13.6231 13.2967L3.00019 3” stroke=“%233F4750” stroke-width=“6” stroke-linecap=“round” stroke-linejoin=“round”/></svg>’);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.il_faq .groups .group.active .group-title:after{
background-image: url(‘data&colon;image/svg+xml;utf8,<svg%20width=“7”%20height=“5”%20viewBox=“0%200%207%205”%20fill=“none”%20xmlns=“http://www.w3.org/2000/svg"><path%20fill-rule=“evenodd”%20clip-rule=“evenodd”%20d=“M6.00009%204.59555C6.22561%204.81498%206.59494%204.8185%206.82501%204.60341C7.05507%204.38832%207.05876%204.03607%206.83324%203.81664L3.56585%200.637451L0.174914%203.80885C-0.0551121%204.02399%20-0.058729%204.37624%200.166835%204.59563C0.392399%204.81501%200.761728%204.81846%200.991753%204.60333L3.54953%202.21115L6.00009%204.59555Z”%20fill="black”/></svg>’);
}

.il_faq .groups .group .group-content{
max-height: 1px;
overflow: hidden;
transition: 0.3s ease-out max-height;
}
.il_faq .groups .group.active .group-content{
overflow: visible;
max-height: 9000px;
transition-timing-function: ease-in;
}

.il_faq .groups .group .group-content .group-content-inner{
padding: 20px 11px;
}
.il_faq .groups .group .group-content .group-content-inner ul{
margin: 0;
list-style: none;
padding: 0;
}

.il_faq .groups .group .group-content .group-content-inner ul li {
padding: 10px 0 10px 22px;
position: relative;
}
.il_faq .groups .group .group-content .group-content-inner ul li .question{
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: #FFE66F;
cursor: pointer;
}
.il_faq .groups .group .group-content .group-content-inner ul li .question:before{
content: "• ";
color: #FFE66F;
line-height: 21px;
position: absolute;
left: 0;
}

.il_faq .groups .group .group-content .group-content-inner ul li .answer{
font-size: 13px;
line-height: 150%;
color: #FFFFFF;

max-height: 1px;
overflow: hidden;
transition: 0.3s ease-out max-height;
}
.il_faq .groups .group .group-content .group-content-inner ul li .answer *:first-child{
margin-top: 14px;
}
.il_faq .groups .group .group-content .group-content-inner ul li.active .answer{
overflow: visible;
max-height: 9000px;
transition-timing-function: ease-in;
}

@media(max-width: 1279px){
.il_faq .wrapper{
max-width: 90%;
}
}
@media(max-width: 1023px){
.il_faq .groups{
grid-template-columns: 100%;
}
.il_faq .content h2{
font-size: 36px;
}
}
@media(max-width: 767px){
.il_faq{
padding-top: 49px;
padding-bottom: 49px;
}
.il_faq .wrapper{
max-width: 304px;
}
.il_faq .content,
.il_faq .content p{
font-size: 12px;
line-height: 1.5;
}
.il_faq .content h2{
font-size: 28px;
}
.il_faq .groups{
grid-template-columns: 100%;
}
}

36324i48F318A524A1B7C6.png
36324i48F318A524A1B7C6.png999×422 106 KB

2

Hey @Edward_SF

Welcome to the Community!

Let me introduce you to a couple people who I think can help out. Heck, they might compete to see who’s answer is best

@piersg , @Kevin-C on your marks, get set, CODE

(ps, this will be very deflating for me if no one responds :face_with_tongue:)

3

LOL @dennisedson

Hey @Edward_SF

If you could post you html and js that would be aweseom!

I’m totally guessing here:

After looking at you CSS i see you’re using css grid! *slow clap*

Though great, it may be the source of your woes. Imagine CSS Grid as a html table.

A B C

When the height of one cell in a row is increased via its children or css, the height is inherited by all cells in that row:

A
A
A
A		BC

If this is in fact the issue, I would suggest simplifying your module to only include a single block level FAQ table. Then use built in columns or drag and drop to place 2 FAQ modules side by side.

Or if you’re looking for a more visually cohesive layout on mobile, try flexbox to create the 2 columns.

@piersg

4

Thanks Kevin-C! I’ll try out your solution.

Is there a marketplace for Hubspot tutors?

5

@Edward_SF

Love that idea! Mind if I steal it :rofl:

With that being said, I am going to be starting to produce some short (1-5min videos) on CMS and API HubSpot Development. I am very much up for any suggested content!