diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index dcb8d1e3b9..fefa420555 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -19,10 +19,10 @@ import { NavLink } from '../../../types';
 
 interface Props {
   navLinks: NavLink[];
-  updateMobileAccordionState: () => void;
+  toggleMobileAccordion: () => void;
 }
 
-export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) => {
+export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -53,7 +53,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) =
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref onClick={updateMobileAccordionState}>
+                        <NextLink href={to} passHref onClick={toggleMobileAccordion}>
                           <Link textDecoration='none !important'>
                             <Text
                               textStyle='docs-nav-dropdown'
@@ -90,7 +90,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, updateMobileAccordionState }) =
                   </AccordionButton>
                   {items && (
                     <AccordionPanel borderBottom='2px solid' borderColor='primary' px={0} py={4}>
-                      <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState} />
+                      <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />
                     </AccordionPanel>
                   )}
                 </>
diff --git a/src/components/UI/docs/DocsNav.tsx b/src/components/UI/docs/DocsNav.tsx
index 5bccc680c4..91f8d37ce3 100644
--- a/src/components/UI/docs/DocsNav.tsx
+++ b/src/components/UI/docs/DocsNav.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export const DocsNav: FC<Props> = ({ navLinks }) => {
-  const [isMobileAccordionOpen, setIsMobileAccordionOpen] = useState(false)
+  const [isMobileAccordionOpen, setMobileAccordionState] = useState(false)
 
   const toggleMobileAccordion = () => {
     setMobileAccordionState(prev => !prev)
@@ -26,11 +26,11 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
   return (
     <Stack w={{ base: '100%', lg: 72 }}>
       <Stack display={{ base: 'none', lg: 'block' }}>
-        <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
+        <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
       </Stack>
 
       <Stack display={{ base: 'block', lg: 'none' }}>
-        <Accordion allowToggle index={mobileAccordionState} onChange={updateMobileAccordionState}>
+        <Accordion allowToggle index={isMobileAccordionOpen ? 0 : -1} onChange={toggleMobileAccordion}>
           <AccordionItem border='none'>
             <AccordionButton
               display='flex'
@@ -55,7 +55,7 @@ export const DocsNav: FC<Props> = ({ navLinks }) => {
               <AccordionIcon />
             </AccordionButton>
             <AccordionPanel p={0}>
-              <DocsLinks navLinks={navLinks} updateMobileAccordionState={updateMobileAccordionState} />
+              <DocsLinks navLinks={navLinks} toggleMobileAccordion={toggleMobileAccordion} />
             </AccordionPanel>
           </AccordionItem>
         </Accordion>
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 152f720b11..ef6f027770 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -7,10 +7,10 @@ import { NavLink } from '../../../types';
 
 interface LinksListProps {
   links: NavLink[];
-  updateMobileAccordionState: () => void;
+  toggleMobileAccordion: () => void;
 }
 
-export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionState }) => {
+export const LinksList: FC<LinksListProps> = ({ links, toggleMobileAccordion }) => {
   const router = useRouter();
   const { slug } = router.query;
   return (
@@ -25,7 +25,7 @@ export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionStat
             _hover={{ background: 'primary', color: 'bg' }}
             data-group
           >
-            <NextLink href={to} passHref key={id} onClick={updateMobileAccordionState}>
+            <NextLink href={to} passHref key={id} onClick={toggleMobileAccordion}>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'
@@ -46,14 +46,14 @@ export const LinksList: FC<LinksListProps> = ({ links, updateMobileAccordionStat
                 </Text>
               </Link>
             </NextLink>
-            {items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState}/>}
+            {items && <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion}/>}
           </Stack>
         ) : (
           <Stack key={id} pb={6}>
             <Text textStyle='docs-nav-links' color={items ? 'primary' : 'body'}>
               {id}
             </Text>
-            {items && <LinksList links={items} updateMobileAccordionState={updateMobileAccordionState} />}
+            {items && <LinksList links={items} toggleMobileAccordion={toggleMobileAccordion} />}
           </Stack>
         );
       })}