--- orig/components/ContentContainer/AccordionContainer.jsx	2021-10-11 20:30:09.799665485 -0300
+++ sources-gen/components/ContentContainer/AccordionContainer.jsx	2021-10-11 15:49:17.793082410 -0300
@@ -6,43 +6,26 @@
 import { useTranslation } from '../../hooks/useTranslation';
 
 export const AccordionContainer = ({ title, children, className }) => {
-  const element = useRef(null);
-  const [isOpen, { toggleOnClick }] = useToggle();
-  const height = element.current ? element.current.scrollHeight : '0';
   const titleTranslation = useTranslation(title);
 
   return (
-    <div className={className}>
-      <div className="row noVMargins">
+    <details className={className}>
+      <summary className="row noVMargins">
         <div className="col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
-          <button tabIndex={0} onClick={toggleOnClick}>
             <h4>
               {titleTranslation}
-              <ToggleableArrow
-                className="toggleable-arrow"
-                fill={colors.LG_BLACK}
-                {...{
-                  isUp: isOpen,
-                }}
-              />
             </h4>
-          </button>
         </div>
-      </div>
+      </summary>
       <AccordionContainerContent
-        height={height}
-        isOpen={isOpen}
-        ref={element}
-        aria-expanded={isOpen}
       >
         {children}
       </AccordionContainerContent>
-    </div>
+    </details>
   );
 };
 
 export const AccordionContainerContent = styled.div`
-  max-height: ${({ isOpen, height }) => (isOpen ? height : '1')}px;
   overflow: hidden;
   background-color: ${colors.LG_WHITE};
   transition: max-height 0.7s;