refactor(SW-194): move css to parent

components/Blocks/Accordion/accordion.module.css

@@ -1,7 +1,7 @@
-.accordion :not(.allVisible):nth-child(n + 6) {
+.accordion:not(.allVisible) :nth-child(n + 6) {
   display: none;
 }
 
-.accordion :not(.allVisible):nth-child(5) {
+.accordion:not(.allVisible) :nth-child(5) {
   border: none;
 }

components/Blocks/Accordion/index.tsx

@@ -25,13 +25,13 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
   return (
     <SectionContainer id={HotelHashValues.faq}>
       {title && <SectionHeader textTransform="uppercase" title={title} />}
-      <Accordion className={styles.accordion} theme="light" variant="card">
+      <Accordion
+        className={`${styles.accordion}${allAccordionsVisible ? styles.allVisible : ""}`}
+        theme="light"
+        variant="card"
+      >
         {accordion.map((acc) => (
-          <AccordionItem
+          <AccordionItem key={acc.question} title={acc.question}>
-            key={acc.question}
-            title={acc.question}
-            className={`${allAccordionsVisible ? styles.allVisible : ""}`}
-          >
             <JsonToHtml
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}

components/ContentType/HotelPage/Rooms/index.tsx

@@ -17,7 +17,7 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
-  const showToggleButton = rooms.length > 6
+  const showToggleButton = rooms.length > 4
   const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
 
   const scrollRef = useRef<HTMLDivElement>(null)
@@ -61,12 +61,11 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable className={styles.grid}>
+      <Grids.Stackable
+        className={`${styles.grid}${allRoomsVisible ? styles.allVisible : ""}`}
+      >
         {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
-          <div
+          <div key={id}>
-            key={id}
-            className={`${allRoomsVisible ? styles.allVisible : ""}`}
-          >
             <RoomCard
               id={id}
               images={images}

components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -17,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.grid :not(.allVisible):nth-child(n + 4) {
+.grid:not(.allVisible) :nth-child(n + 4) {
   display: none;
 }