# Accordian Drop down opens both sides

**URL:** <https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [January 12, 2021, 10:43pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101 "2021-01-12T22:43:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Edward\_SF](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/edward_sf/32/27089_2.png) [@Edward\_SF](https://community.hubspot.com/u/Edward_SF)\
**Post date:** [January 12, 2021, 10:43pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101/1 "2021-01-12T22:43:05Z")

</div>

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](http://www.w3.org/2000/svg)”\>\<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](http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M6.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%22%20fill=%22black)”/\>\</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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(max-width: 1279px){  
.il\_faq .wrapper{  
max-width: 90%;  
}  
}  
[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(max-width: 1023px){  
.il\_faq .groups{  
grid-template-columns: 100%;  
}  
.il\_faq .content h2{  
font-size: 36px;  
}  
}  
[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477)(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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/5/a518c33106f7c9cbaa30b35ada6ddb4758f7ce44.png)

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [January 13, 2021, 7:25pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101/2 "2021-01-13T19:25:35Z")

</div>

Hey [@Edward\_SF](https://community.hubspot.com/t5/user/viewprofilepage/user-id/158456)

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 😛)

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [January 13, 2021, 7:49pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101/3 "2021-01-13T19:49:40Z")

</div>

LOL @dennisedson

Hey [@Edward\_SF](https://community.hubspot.com/t5/user/viewprofilepage/user-id/158456)

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 | B | C |

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

![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/c/cc9bd1c0c01ecc485c6eb570b1d54d824afcc190.webp "Scott Pilgrim Hardon GIF - Find & Share on GIPHY")

---

<div class="post-metadata">

**Author:** ![Edward\_SF](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/edward_sf/32/27089_2.png) [@Edward\_SF](https://community.hubspot.com/u/Edward_SF)\
**Post date:** [January 14, 2021, 7:08pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101/4 "2021-01-14T19:08:25Z")

</div>

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

Is there a marketplace for Hubspot tutors?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [January 14, 2021, 7:47pm UTC](https://community.hubspot.com/t/accordian-drop-down-opens-both-sides/30101/5 "2021-01-14T19:47:05Z")

</div>

[@Edward\_SF](https://community.hubspot.com/t5/user/viewprofilepage/user-id/158456)

Love that idea! Mind if I steal it 🤣

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!