diff --git a/components/Blocks/Accordion/accordion.module.css b/components/Blocks/Accordion/accordion.module.css
index f3c07125b..feabed988 100644
--- a/components/Blocks/Accordion/accordion.module.css
+++ b/components/Blocks/Accordion/accordion.module.css
@@ -1,7 +1,7 @@
-.hiddenItem {
+.accordion :not(.allVisible):nth-child(n + 6) {
   display: none;
 }
 
-.lastItem {
+.accordion :not(.allVisible):nth-child(5) {
   border: none;
 }
diff --git a/components/Blocks/Accordion/index.tsx b/components/Blocks/Accordion/index.tsx
index e8f3ae3d7..baff7435a 100644
--- a/components/Blocks/Accordion/index.tsx
+++ b/components/Blocks/Accordion/index.tsx
@@ -22,24 +22,15 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
     setAllAccordionsVisible((state) => !state)
   }
 
-  function getClassName(idx: number): string {
-    if (!allAccordionsVisible && idx > 4) {
-      return styles.hiddenItem
-    } else if (!allAccordionsVisible && idx === 4) {
-      return styles.lastItem
-    }
-    return ""
-  }
-
   return (
     <SectionContainer id={HotelHashValues.faq}>
       {title && <SectionHeader textTransform="uppercase" title={title} />}
-      <Accordion theme="light" variant="card">
-        {accordion.map((acc, idx: number) => (
+      <Accordion className={styles.accordion} theme="light" variant="card">
+        {accordion.map((acc) => (
           <AccordionItem
             key={acc.question}
             title={acc.question}
-            className={getClassName(idx)}
+            className={`${allAccordionsVisible ? styles.allVisible : ""}`}
           >
             <JsonToHtml
               embeds={acc.answer.embedded_itemsConnection.edges}