diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5a150d1..a8972de 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,4 +1,5 @@
 enum Pattern {
+    Accordion = 'Accordion',
     Avatar = 'Avatar',
     AvatarList = 'Avatar list',
     Badge = 'Badge',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 15b3f69..14ec37b 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -88,6 +88,7 @@ const ExplorePage = () => {
                     <Heading title="Patterns" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.Accordion} />
                         <CoverCard pattern={Pattern.Avatar} />
                         <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
diff --git a/client/patterns/accordion/Cover.tsx b/client/patterns/accordion/Cover.tsx
new file mode 100644
index 0000000..0128446
--- /dev/null
+++ b/client/patterns/accordion/Cover.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        height: '100%',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '4px' }}>
+                                <Triangle corner='r' size={6} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <Rectangle height={4} />
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '4px' }}>
+                                <Triangle corner='b' size={6} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                                <Rectangle height={4} />
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ padding: '8px' }}>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
new file mode 100644
index 0000000..09ac3b3
--- /dev/null
+++ b/client/patterns/accordion/Details.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+interface ItemProps {
+    index: number;
+    title: React.ReactNode;
+}
+
+const Details: React.FC<{}> = () => {
+    const [activeItem, setActiveItem] = useState(1);
+
+    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
+        const isOpened = (index === activeItem);
+        const click = () => setActiveItem(isOpened ? -1 : index);
+        return (
+            <>
+                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            padding: '16px',
+                        }}
+                        onClick={click}
+                    >
+                        <div style={{ marginRight: '12px' }}>
+                            <Triangle size={8} corner={isOpened ? 'b' : 'r'} />
+                        </div>
+                        <div style={{ flex: 1 }}>{title}</div>
+                    </div>
+                    <div
+                        style={{
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: isOpened ? 'block' : 'none',
+                            padding: '16px',
+                        }}
+                    >
+                        {children}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    return (
+        <DetailsLayout title="Accordion">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderBottomColor: 'transparent',
+                                    borderRadius: '4px',
+                                    width: '60%',
+                                }}
+                            >
+                                <Item
+                                    index={0}
+                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                </Item>
+                                <Item
+                                    index={1}
+                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                </Item>
+                                <Item
+                                    index={2}
+                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
+                                >
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                </Item>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<!-- Container -->
+<div style="
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-bottom-color: transparent;
+    border-radius: 4px;
+">
+    <!-- Each accordion item -->
+    <div style="
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    ">
+        <!-- Heading -->
+        <div style="
+            /* Center the content horizontally */
+            align-items: center;
+            display: flex;
+
+            cursor: pointer;
+            padding: 16px;
+        ">
+            <!-- The toggle icon -->
+            <div style="margin-right: 12px;">...</div>
+
+            <!-- The title -->
+            <div style="
+                flex: 1; /* Take remaining width */
+            ">
+                ...
+            </div>
+        </div>
+
+        <!-- The content -->
+        <div style="
+            /* For selected item */
+            display: block;
+
+            /* For not selected item */
+            display: none;
+
+            border-top: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 16px;
+        ">
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other item -->
+    ...
+</div>
+
+
+<div style="
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- Heading -->
+    <div style="
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    ">
+        <!-- Question -->
+        ...
+
+        <!-- The toggle icon sticks to the right -->
+        ...
+    </div>
+
+    <!-- Answer -->
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 26a524f..abf0a70 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -18,7 +20,7 @@ const Details: React.FC<{}> = () => {
         const isOpened = (index === activeItem);
         const click = () => setActiveItem(isOpened ? -1 : index);
         return (
-            <div>
+            <>
                 <div
                     style={{
                         alignItems: 'center',
@@ -32,8 +34,15 @@ const Details: React.FC<{}> = () => {
                     {title}
                     <Triangle size={8} corner={isOpened ? 't' : 'b'} />
                 </div>
-                {isOpened && children}
-            </div>
+                <div
+                    style={{
+                        display: isOpened ? 'block' : 'none',
+                        marginBottom: '16px',
+                    }}
+                >
+                    {children}
+                </div>
+            </>
         );
     };
 
@@ -53,6 +62,15 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             <div style={{ width: '60%' }}>
+                                <div
+                                    style={{
+                                        margin: '0 auto',
+                                        paddingBottom: '24px',
+                                        width: '200px',
+                                    }}
+                                >
+                                    <Rectangle />
+                                </div>
                                 <div
                                     style={{
                                         borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
@@ -63,7 +81,7 @@ const Details: React.FC<{}> = () => {
                                         index={0}
                                         title={<div style={{ width: '40%' }}><Rectangle /></div>}
                                     >
-                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                        <Block numberOfBlocks={10} />
                                     </Item>
                                 </div>
                                 <div
@@ -75,7 +93,7 @@ const Details: React.FC<{}> = () => {
                                         index={1}
                                         title={<div style={{ width: '80%' }}><Rectangle /></div>}
                                     >
-                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                        <Block numberOfBlocks={15} />
                                     </Item>
                                 </div>
                                 <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
@@ -83,7 +101,7 @@ const Details: React.FC<{}> = () => {
                                         index={2}
                                         title={<div style={{ width: '60%' }}><Rectangle /></div>}
                                     >
-                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
+                                        <Block numberOfBlocks={10} />
                                     </Item>
                                 </div>
                             </div>
@@ -112,6 +130,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.Accordion]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5adeb20..42c87b3 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -5,6 +5,7 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/accordion</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>