diff --git a/src/components/ActivityTimeline/context.js b/src/components/ActivityTimeline/context.js
new file mode 100644
index 000000000..85c6600e8
--- /dev/null
+++ b/src/components/ActivityTimeline/context.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const ActivityTimelineContext = React.createContext();
+export const { Provider, Consumer } = ActivityTimelineContext;
diff --git a/src/components/ActivityTimeline/helpers/getChildTimelineMarkersNodes.js b/src/components/ActivityTimeline/helpers/getChildTimelineMarkersNodes.js
new file mode 100644
index 000000000..40aeed04b
--- /dev/null
+++ b/src/components/ActivityTimeline/helpers/getChildTimelineMarkersNodes.js
@@ -0,0 +1,6 @@
+export default function getChildTimelineMarkersNodes(ref) {
+    if (ref) {
+        return ref.querySelectorAll('li[data-id="timeline-marker-li"]');
+    }
+    return [];
+}
diff --git a/src/components/ActivityTimeline/helpers/index.js b/src/components/ActivityTimeline/helpers/index.js
new file mode 100644
index 000000000..4d0eba303
--- /dev/null
+++ b/src/components/ActivityTimeline/helpers/index.js
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as getChildTimelineMarkersNodes } from './getChildTimelineMarkersNodes';
diff --git a/src/components/ActivityTimeline/index.d.ts b/src/components/ActivityTimeline/index.d.ts
index bb273668f..985a5fee9 100644
--- a/src/components/ActivityTimeline/index.d.ts
+++ b/src/components/ActivityTimeline/index.d.ts
@@ -1,8 +1,13 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import { BaseProps } from '../types';
 
+type Names = string[] | string;
+
 export interface ActivityTimelineProps extends BaseProps {
     children?: ReactNode;
+    multiple?: boolean;
+    onToggleSection?: (event: MouseEvent<HTMLElement>, name: Names) => void;
+    activeSectionNames?: Names;
 }
 
 export default function(props: ActivityTimelineProps): JSX.Element | null;
diff --git a/src/components/ActivityTimeline/index.js b/src/components/ActivityTimeline/index.js
index bf674f47d..cdda5ddd9 100644
--- a/src/components/ActivityTimeline/index.js
+++ b/src/components/ActivityTimeline/index.js
@@ -1,22 +1,101 @@
-import React from 'react';
+import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import isChildRegistered from '../InternalDropdown/helpers/isChildRegistered';
+import insertChildOrderly from '../InternalDropdown/helpers/insertChildOrderly';
+import { getChildTimelineMarkersNodes } from './helpers';
+import { Provider } from './context';
 import StyledUl from './styled/ul';
 
 /**
- * The ActivityTimeline displays each of any item upcoming, current, and past activities.
+ * The ActivityTimeline displays each of any item's upcoming, current, and past activities in chronological order (ascending or descending).
+ * Notice that ActivityTimeline and TimelineMarker components are related and should be implemented together.
  * @category Layout
  */
 export default function ActivityTimeline(props) {
-    const { children, className, style } = props;
+    const {
+        id,
+        children,
+        className,
+        style,
+        variant,
+        multiple,
+        activeSectionNames,
+        onToggleSection,
+    } = props;
+    const registeredTimelineMarkers = useRef([]);
+    const [activeNames, setActiveNames] = useState(activeSectionNames);
+    const containerRef = useRef();
+
+    useEffect(() => {
+        if (
+            activeSectionNames &&
+            activeSectionNames !== activeNames &&
+            typeof onToggleSection === 'function'
+        ) {
+            setActiveNames(activeSectionNames);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeSectionNames, onToggleSection]);
+
+    const privateRegisterMarker = useCallback((stepRef, stepProps) => {
+        if (isChildRegistered(stepProps.name, registeredTimelineMarkers.current)) return;
+        const [...nodes] = getChildTimelineMarkersNodes(containerRef.current);
+        const newStepsList = insertChildOrderly(
+            registeredTimelineMarkers.current,
+            {
+                ref: stepRef,
+                ...stepProps,
+            },
+            nodes,
+        );
+        registeredTimelineMarkers.current = newStepsList;
+    }, []);
+
+    const privateUnregisterMarker = useCallback((stepRef, stepName) => {
+        if (!isChildRegistered(stepName, registeredTimelineMarkers.current)) return;
+        registeredTimelineMarkers.current = registeredTimelineMarkers.current.filter(
+            step => step.name !== stepName,
+        );
+    }, []);
+
+    const privateOnToggleMarker = useCallback(
+        (event, name) => {
+            if (typeof onToggleSection === 'function') {
+                return onToggleSection(event, name);
+            }
+            return setActiveNames(name);
+        },
+        [onToggleSection],
+    );
+
+    const context = useMemo(() => {
+        return {
+            activeNames,
+            multiple,
+            isVariantAccordion: variant === 'accordion',
+            privateRegisterMarker,
+            privateUnregisterMarker,
+            privateOnToggleMarker,
+        };
+    }, [
+        variant,
+        activeNames,
+        multiple,
+        privateRegisterMarker,
+        privateUnregisterMarker,
+        privateOnToggleMarker,
+    ]);
 
     return (
-        <StyledUl className={className} style={style}>
-            {children}
+        <StyledUl id={id} className={className} style={style} ref={containerRef} variant={variant}>
+            <Provider value={context}>{children}</Provider>
         </StyledUl>
     );
 }
 
 ActivityTimeline.propTypes = {
+    /** The id of the outer element. */
+    id: PropTypes.string,
     /**
      * This prop that should not be visible in the documentation.
      * @ignore
@@ -26,10 +105,32 @@ ActivityTimeline.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** If true, expands multiples TimelineMarkers.
+     * This value defaults to false. */
+    multiple: PropTypes.bool,
+    /** The variant changes the appearance of the timeline. Accepted variants include
+     * default and accordion. */
+    variant: PropTypes.oneOf(['default', 'accordion']),
+    /** It contain the name of the TimelineMarker that is expanded.
+     * It is an array of string when multiple is true,
+     * or a string when when multiple is false.
+     * It must match the name of the TimelineMarker. */
+    activeSectionNames: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string),
+        PropTypes.string,
+    ]),
+    /** Action fired when a TimelineMarker is selected.
+     * The event params include the `name` of the selected TimelineMarker. */
+    onToggleSection: PropTypes.func,
 };
 
 ActivityTimeline.defaultProps = {
+    id: undefined,
     children: null,
     className: undefined,
     style: undefined,
+    variant: 'default',
+    multiple: false,
+    onToggleSection: undefined,
+    activeSectionNames: undefined,
 };
diff --git a/src/components/ActivityTimeline/readme.md b/src/components/ActivityTimeline/readme.md
index 01c52c6bc..50eb28445 100644
--- a/src/components/ActivityTimeline/readme.md
+++ b/src/components/ActivityTimeline/readme.md
@@ -1,4 +1,5 @@
-##### ActivityTimeline base example:
+# The basic ActivityTimeline
+##### This example shows a simple activity timeline that vertically displays a list of events in chronological order.
 
 ```js
 import React from 'react';
@@ -37,3 +38,134 @@ const container = { width: 500, margin: 'auto', marginTop: 36, };
         </ActivityTimeline>
     </div>
 ```
+
+# ActivityTimeline as accordion
+##### ActivityTimeline can be used as an accordion. You can do so by implementing the `variant` prop.
+
+```js
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { ActivityTimeline, TimelineMarker } from 'react-rainbow-components';
+import styled from 'styled-components';
+
+const StyledContainer = styled.div`
+    margin: 36px 4rem 0;
+`;
+
+const StyledContentContainer = styled.div.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    border-radius: 1rem;
+    padding: 1rem 2rem;
+    background: ${props => props.background.highlight};
+    color: ${props => props.text.main};
+`;
+
+const StyledContentHeader = styled.h3`
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+`;
+
+const StyledItemsContainer = styled.h3`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledLabel = styled.span.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    color: ${props => props.text.label};
+    width: 100%;
+    max-width: 140px;
+    padding: 0.5rem 0;
+`;
+
+const StyledValue = styled.span.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    font-weight: bold;
+    color: ${props => props.text.main};
+`;
+
+const EventDetails = ({ uid, birthdate }) => {
+    return (
+        <StyledContentContainer>
+            <StyledContentHeader>Details</StyledContentHeader>
+            <StyledItemsContainer>
+                <StyledLabel>UID</StyledLabel>
+                <StyledValue>{uid}</StyledValue>
+            </StyledItemsContainer>
+            <StyledItemsContainer>
+                <StyledLabel>Date of Birthday</StyledLabel>
+                <StyledValue>{birthdate}</StyledValue>
+            </StyledItemsContainer>
+        </StyledContentContainer>
+    );
+};
+
+const AccordionActivityTimeline =  ({ eventsList }) => {
+    const [activeEvents, setActiveEvents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const markers = useMemo(() => eventsList.map(event => {
+        const { name, user, datetime, description, details } = event;
+        const iconStyles = { width: 32, height: 32 };
+        return (
+            <TimelineMarker
+                key={name}
+                name={name}
+                label={user}
+                isLoading={loading}
+                icon={<UserSignUpIcon style={iconStyles} />}
+                datetime={datetime}
+                description={description}
+            >
+                <EventDetails uid={details.uid} birthdate={details.birthdate} />
+            </TimelineMarker>
+        );
+    }), [eventsList, loading]);
+
+    useEffect(() => {
+        setTimeout(() => setLoading(false), 3000);
+    }, []);
+
+    const handleToggleEvent = useCallback((event, name) => {
+        setActiveEvents(name);
+    }, []);
+
+    return (
+        <StyledContainer>
+            <ActivityTimeline
+                variant="accordion"
+                multiple
+                activeSectionNames={activeEvents}
+                onToggleSection={handleToggleEvent}
+            >
+                {markers}
+            </ActivityTimeline>
+        </StyledContainer>
+    );
+};
+
+const events = [
+    {
+        name: 'event1',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing.',
+        user: 'Tahimi Leon',
+        datetime: '11:00 AM, Today',
+        details: {
+            uid: '1610482374420',
+            birthdate: 'January 12, 2021',
+        },
+    },
+    {
+        name: 'event2',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing.',
+        user: 'Tahimi Leon',
+        datetime: '11:00 AM, Today',
+        details: {
+            uid: '1610482374420',
+            birthdate: 'January 12, 2021',
+        },
+    }
+];
+    <AccordionActivityTimeline eventsList={events} />
+```
diff --git a/src/components/ActivityTimeline/styled/ul.js b/src/components/ActivityTimeline/styled/ul.js
index 68e657d2a..2a3b0c700 100644
--- a/src/components/ActivityTimeline/styled/ul.js
+++ b/src/components/ActivityTimeline/styled/ul.js
@@ -8,6 +8,11 @@ const StyledUl = styled.ul`
     padding: 0;
     list-style: none;
     box-sizing: border-box;
+    ${props =>
+        props.variant === 'accordion' &&
+        `
+        padding-left: 1.25rem;
+        `};
 `;
 
 export default StyledUl;
diff --git a/src/components/TimelineMarker/__test__/timelineMarker.spec.js b/src/components/TimelineMarker/__test__/timelineMarker.spec.js
index 8aa559cbf..5161c4ba4 100644
--- a/src/components/TimelineMarker/__test__/timelineMarker.spec.js
+++ b/src/components/TimelineMarker/__test__/timelineMarker.spec.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import ActivityTimeline from '../../ActivityTimeline';
 import TimelineMarker from '../index';
 import Card from '../../Card';
 import Avatar from '../../Avatar';
@@ -10,31 +11,51 @@ import StyledDescription from '../styled/description';
 describe('<TimelineMarker/>', () => {
     it('should render the children passed', () => {
         const component = mount(
-            <TimelineMarker>
-                <Card title="TimelineMarker--children" />
-            </TimelineMarker>,
+            <ActivityTimeline>
+                <TimelineMarker>
+                    <Card title="TimelineMarker--children" />
+                </TimelineMarker>
+            </ActivityTimeline>,
         );
         expect(component.find(Card).exists()).toBe(true);
     });
     it('should render the icon passed', () => {
-        const component = mount(<TimelineMarker icon={<Avatar />} />);
+        const component = mount(
+            <ActivityTimeline>
+                <TimelineMarker icon={<Avatar />} />
+            </ActivityTimeline>,
+        );
         expect(component.find(Avatar).exists()).toBe(true);
     });
     it('should render the calendar icon by default', () => {
-        const component = mount(<TimelineMarker />);
+        const component = mount(
+            <ActivityTimeline>
+                <TimelineMarker />
+            </ActivityTimeline>,
+        );
         expect(component.find('CalendarIcon').exists()).toBe(true);
     });
     it('should render the label passed', () => {
-        const component = mount(<TimelineMarker label="testing label on TimelineMarker" />);
+        const component = mount(
+            <ActivityTimeline>
+                <TimelineMarker label="testing label on TimelineMarker" />
+            </ActivityTimeline>,
+        );
         expect(component.find(StyledLabel).text()).toBe('testing label on TimelineMarker');
     });
     it('should render the datetime passed', () => {
-        const component = mount(<TimelineMarker datetime="Yesterday" />);
+        const component = mount(
+            <ActivityTimeline>
+                <TimelineMarker datetime="Yesterday" />
+            </ActivityTimeline>,
+        );
         expect(component.find(StyledDatetime).text()).toBe('Yesterday');
     });
     it('should render the description passed', () => {
         const component = mount(
-            <TimelineMarker description="testing description on TimelineMarker" />,
+            <ActivityTimeline>
+                <TimelineMarker description="testing description on TimelineMarker" />,
+            </ActivityTimeline>,
         );
         expect(component.find(StyledDescription).text()).toBe(
             'testing description on TimelineMarker',
diff --git a/src/components/TimelineMarker/expandCollapseButton.js b/src/components/TimelineMarker/expandCollapseButton.js
new file mode 100644
index 000000000..56fab42d7
--- /dev/null
+++ b/src/components/TimelineMarker/expandCollapseButton.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './styled/button';
+import Spinner from '../Spinner';
+import SpinnerContainer from './styled/spinnerContainer';
+import RightArrow from './icons/rightArrow';
+import DownArrow from './icons/downArrow';
+
+function getIcon(isExpanded) {
+    if (isExpanded) {
+        return <DownArrow />;
+    }
+    return <RightArrow />;
+}
+
+export default function ExpandCollapseButton(props) {
+    const { isExpanded, isLoading, onClick } = props;
+    if (isLoading) {
+        return (
+            <SpinnerContainer>
+                <Spinner variant="brand" type="arc" size="xx-small" />
+            </SpinnerContainer>
+        );
+    }
+    return <Button size="x-small" icon={getIcon(isExpanded)} onClick={onClick} tabIndex={-1} />;
+}
+
+ExpandCollapseButton.propTypes = {
+    isExpanded: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
diff --git a/src/components/TimelineMarker/icons/downArrow.js b/src/components/TimelineMarker/icons/downArrow.js
new file mode 100644
index 000000000..4d0337a87
--- /dev/null
+++ b/src/components/TimelineMarker/icons/downArrow.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function DownArrow(props) {
+    const { className, style } = props;
+    return (
+        <svg width="10px" height="6px" viewBox="0 0 10 6" className={className} style={style}>
+            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="Components-Tree" transform="translate(-171.000000, -534.000000)">
+                    <g id="Group-18" transform="translate(127.000000, 350.000000)">
+                        <g id="Group-13-Copy" transform="translate(41.000000, 107.000000)">
+                            <g id="Group-12" transform="translate(0.000000, 64.000000)">
+                                <g id="Group-64" transform="translate(0.000000, 8.000000)">
+                                    <rect id="Rectangle" x="0" y="0" width="16" height="16" />
+                                    <path
+                                        d="M11.8583275,5.45142276 C12.1285441,5.19406045 12.5562312,5.20448084 12.8135935,5.47469735 C13.0475593,5.72034873 13.060217,6.09614112 12.8575671,6.35579695 L12.7903189,6.42996332 L8.46599569,10.5485785 C8.2311372,10.7722648 7.87548362,10.7946334 7.61646611,10.6156844 L7.53400431,10.5485785 L3.20968107,6.42996332 C2.93946456,6.17260101 2.92904417,5.74491387 3.18640648,5.47469735 C3.42037222,5.22904598 3.79510228,5.19810214 4.06431909,5.38786628 L4.14167245,5.45142276 L8,9.12537693 L11.8583275,5.45142276 Z"
+                                        id="Line-3"
+                                        fill="currentColor"
+                                        fillRule="nonzero"
+                                    />
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+DownArrow.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+DownArrow.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
diff --git a/src/components/TimelineMarker/icons/rightArrow.js b/src/components/TimelineMarker/icons/rightArrow.js
new file mode 100644
index 000000000..b1ee0c085
--- /dev/null
+++ b/src/components/TimelineMarker/icons/rightArrow.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function RightArrow(props) {
+    const { className, style } = props;
+    return (
+        <svg width="6px" height="10px" viewBox="0 0 6 10" className={className} style={style}>
+            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="Components-Tree" transform="translate(-173.000000, -660.000000)">
+                    <g id="Group-18" transform="translate(127.000000, 350.000000)">
+                        <g id="Group-13-Copy" transform="translate(41.000000, 107.000000)">
+                            <g id="Group-12-Copy" transform="translate(0.000000, 192.000000)">
+                                <g id="Group-6" transform="translate(0.000000, 8.000000)">
+                                    <path
+                                        d="M11.8583275,5.45142277 C12.1285441,5.19406045 12.5562312,5.20448084 12.8135935,5.47469735 C13.0475593,5.72034873 13.060217,6.09614112 12.8575671,6.35579695 L12.7903189,6.42996332 L8.46599569,10.5485785 C8.2311372,10.7722648 7.87548362,10.7946334 7.61646611,10.6156844 L7.53400431,10.5485785 L3.20968107,6.42996332 C2.93946456,6.17260101 2.92904417,5.74491387 3.18640648,5.47469735 C3.42037222,5.22904598 3.79510228,5.19810214 4.06431909,5.38786628 L4.14167245,5.45142277 L8,9.12537693 L11.8583275,5.45142277 Z"
+                                        id="Line-3"
+                                        fill="currentColor"
+                                        fillRule="nonzero"
+                                        transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) "
+                                    />
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    );
+}
+
+RightArrow.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+RightArrow.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
diff --git a/src/components/TimelineMarker/index.d.ts b/src/components/TimelineMarker/index.d.ts
index 272ac8ade..1af29a933 100644
--- a/src/components/TimelineMarker/index.d.ts
+++ b/src/components/TimelineMarker/index.d.ts
@@ -5,6 +5,8 @@ export interface TimelineMarkerProps extends BaseProps {
     label?: ReactNode;
     description?: ReactNode;
     datetime?: ReactNode;
+    isLoading?: boolean;
+    name?: string;
     icon?: ReactNode;
     children?: ReactNode;
 }
diff --git a/src/components/TimelineMarker/index.js b/src/components/TimelineMarker/index.js
index e2e722c48..017e0e352 100644
--- a/src/components/TimelineMarker/index.js
+++ b/src/components/TimelineMarker/index.js
@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useRef, useContext, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import RenderIf from '../RenderIf';
+import { useUniqueIdentifier } from '../../libs/hooks';
+import { ActivityTimelineContext } from '../ActivityTimeline/context';
 import CalendarIcon from './calendarIcon';
 import StyledLi from './styled/li';
 import StyledColumnLeft from './styled/columnLeft';
@@ -10,18 +13,97 @@ import StyledLabel from './styled/label';
 import StyledDatetime from './styled/datetime';
 import StyledDescription from './styled/description';
 import StyledBody from './styled/body';
+import ExpandCollapseButton from './expandCollapseButton';
+import removeItemFromArray from '../AccordionSection/removeItemFromArray';
+import isInArray from '../AccordionSection/isInArray';
 
 /**
- * The TimelineMarker displays one event of an item timeline.
+ * The TimelineMarker displays one event of an item's timeline. It's generally used to compose the ActivityTimeline component.
  * @category Layout
  */
 export default function TimelineMarker(props) {
-    const { icon, label, description, datetime, children, className, style } = props;
+    const {
+        icon,
+        name,
+        isLoading,
+        label,
+        description,
+        datetime,
+        children,
+        className,
+        style,
+    } = props;
+    const {
+        isVariantAccordion,
+        activeNames,
+        multiple,
+        privateRegisterMarker,
+        privateUnregisterMarker,
+        privateOnToggleMarker,
+    } = useContext(ActivityTimelineContext);
+    const generatedName = useUniqueIdentifier('timeline-marker');
+    const currentName = useMemo(() => name || generatedName, [generatedName, name]);
+    const stepRef = useRef();
+
+    useEffect(() => {
+        privateRegisterMarker(stepRef.current, { currentName });
+
+        return () => {
+            privateUnregisterMarker(stepRef, currentName);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const resolveActiveNamesWhenMultiple = useCallback(() => {
+        if (activeNames === undefined) {
+            return [currentName];
+        }
+        if (isInArray(activeNames, currentName)) {
+            return removeItemFromArray(activeNames, currentName);
+        }
+        return activeNames.concat([currentName]);
+    }, [currentName, activeNames]);
+
+    const resolveActiveNames = useCallback(() => {
+        if (multiple) {
+            return resolveActiveNamesWhenMultiple();
+        }
+        if (currentName === activeNames) {
+            return '';
+        }
+        return currentName;
+    }, [currentName, multiple, activeNames, resolveActiveNamesWhenMultiple]);
+
+    const handleToggleMarker = useCallback(
+        event => privateOnToggleMarker(event, resolveActiveNames()),
+        [privateOnToggleMarker, resolveActiveNames],
+    );
+
+    const isExpanded = useMemo(() => {
+        if (isVariantAccordion) {
+            if (multiple && Array.isArray(activeNames)) {
+                return isInArray(activeNames, currentName);
+            }
+            return activeNames === currentName;
+        }
+        return true;
+    }, [isVariantAccordion, currentName, activeNames, multiple]);
+
+    const shouldRenderChildren = useMemo(() => isExpanded && !isLoading, [isLoading, isExpanded]);
 
     return (
-        <StyledLi className={className} style={style}>
+        <StyledLi data-id="timeline-marker-li" className={className} style={style}>
             <StyledColumnLeft>
-                <StyledIconContainer>{icon}</StyledIconContainer>
+                <StyledIconContainer>
+                    <RenderIf isTrue={isVariantAccordion}>
+                        <ExpandCollapseButton
+                            isExpanded={isExpanded}
+                            isLoading={isLoading}
+                            onClick={handleToggleMarker}
+                        />
+                    </RenderIf>
+                    {icon}
+                </StyledIconContainer>
             </StyledColumnLeft>
             <StyledContentContainer>
                 <div>
@@ -31,7 +113,9 @@ export default function TimelineMarker(props) {
                     </StyledHeader>
                     <StyledDescription>{description}</StyledDescription>
                 </div>
-                <StyledBody>{children}</StyledBody>
+                <RenderIf isTrue={shouldRenderChildren}>
+                    <StyledBody>{children}</StyledBody>
+                </RenderIf>
             </StyledContentContainer>
         </StyledLi>
     );
@@ -56,6 +140,11 @@ TimelineMarker.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** The name is used to determine which TimelineMarker was clicked.
+     * If `name` is not passed it will be generated. */
+    name: PropTypes.string,
+    /** Set to true to show a loading symbol. Defaults to false */
+    isLoading: PropTypes.bool,
 };
 
 TimelineMarker.defaultProps = {
@@ -66,4 +155,6 @@ TimelineMarker.defaultProps = {
     children: null,
     className: undefined,
     style: undefined,
+    name: undefined,
+    isLoading: false,
 };
diff --git a/src/components/TimelineMarker/readme.md b/src/components/TimelineMarker/readme.md
index 311033408..d37693e11 100644
--- a/src/components/TimelineMarker/readme.md
+++ b/src/components/TimelineMarker/readme.md
@@ -1,43 +1,49 @@
-##### TimeLineMarker base:
+# The basic TimelineMarker
+##### This example represents a TimelineMarker with a simple style and functionality. As you can see in the code section, you can add some information using the properties `label`, `icon`, `datetime`, and  `description`.
 
 ```js
 import React from 'react';
-import { TimelineMarker } from 'react-rainbow-components';
+import { ActivityTimeline, TimelineMarker } from 'react-rainbow-components';
 
 const iconStyles = { width: 32, height: 32 };
 
     <div className="rainbow-m-around_xx-large">
-        <TimelineMarker
-            label="User Sign Up."
-            icon={<UserSignUpIcon style={iconStyles} />}
-            datetime="Yesterday"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
-        />
+        <ActivityTimeline>
+            <TimelineMarker
+                label="User Sign Up."
+                icon={<UserSignUpIcon style={iconStyles} />}
+                datetime="Yesterday"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
+            />
+        </ActivityTimeline>
     </div>
 ```
 
-##### TimeLineMarker with content and description:
+# TimelineMarker with image
+##### In addition to the descriptive information of the item in the TimelineMarker, you can add an image, as you can see in the example below.
 
 ```js
 import React from 'react';
-import { TimelineMarker, Card } from 'react-rainbow-components';
+import { ActivityTimeline, TimelineMarker, Card } from 'react-rainbow-components';
 
 const iconStyles = { width: 32, height: 32 };
 
     <div className="rainbow-m-around_xx-large">
-        <TimelineMarker
-            label="User first post."
-            icon={<UserFirstPostIcon style={iconStyles} />}
-            datetime="3 hours ago"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmodtempor incidunt ut labore et dolore magna aliqua."
-        >
-            <Card title="Inside Content">
-                <img
-                    src="images/illustrations/Illustration-chef.svg"
-                    className="rainbow-m_auto rainbow-align-content_center"
-                    alt="landscape with rainbows, birds and colorful balloons"
-                />
-            </Card>
-        </TimelineMarker>
+        <ActivityTimeline>
+            <TimelineMarker
+                label="User first post."
+                icon={<UserFirstPostIcon style={iconStyles} />}
+                datetime="3 hours ago"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmodtempor incidunt ut labore et dolore magna aliqua."
+            >
+                <Card title="Inside Content">
+                    <img
+                        src="images/illustrations/Illustration-chef.svg"
+                        className="rainbow-m_auto rainbow-align-content_center"
+                        alt="landscape with rainbows, birds and colorful balloons"
+                    />
+                </Card>
+            </TimelineMarker>
+        </ActivityTimeline>
     </div>
 ```
diff --git a/src/components/TimelineMarker/styled/button.js b/src/components/TimelineMarker/styled/button.js
new file mode 100644
index 000000000..ab66727d7
--- /dev/null
+++ b/src/components/TimelineMarker/styled/button.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import ButtonIcon from '../../ButtonIcon';
+
+const Button = attachThemeAttrs(styled(ButtonIcon))`
+    color: ${props => props.palette.brand.main};
+    margin-left: -1.75rem;
+    margin-right: 0.5rem;
+`;
+
+export default Button;
diff --git a/src/components/TimelineMarker/styled/columnLeft.js b/src/components/TimelineMarker/styled/columnLeft.js
index 2461a3efa..d992f5b55 100644
--- a/src/components/TimelineMarker/styled/columnLeft.js
+++ b/src/components/TimelineMarker/styled/columnLeft.js
@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import { getContrastText, replaceAlpha } from '../../../styles/helpers/color';
+
+const getColor = props => replaceAlpha(getContrastText(props.palette.background.main), 0.1);
 
 const StyledColumnLeft = attachThemeAttrs(styled.div)`
     display: flex;
@@ -9,7 +12,7 @@ const StyledColumnLeft = attachThemeAttrs(styled.div)`
 
     ::before {
         content: '';
-        background-color: ${props => props.palette.background.highlight};
+        background-color: ${props => getColor(props)};
         height: 100%;
         width: 1px;
         position: absolute;
diff --git a/src/components/TimelineMarker/styled/spinner.js b/src/components/TimelineMarker/styled/spinner.js
new file mode 100644
index 000000000..ac26e8b44
--- /dev/null
+++ b/src/components/TimelineMarker/styled/spinner.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import Spinner from '../../Spinner';
+
+const StyledSpinner = styled(Spinner)`
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -1.5rem;
+    box-sizing: border-box;
+    position: relative;
+    left: auto;
+    top: auto;
+`;
+
+export default StyledSpinner;
diff --git a/src/components/TimelineMarker/styled/spinnerContainer.js b/src/components/TimelineMarker/styled/spinnerContainer.js
new file mode 100644
index 000000000..99c5866ae
--- /dev/null
+++ b/src/components/TimelineMarker/styled/spinnerContainer.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const SpinnerContainer = styled.div`
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    margin-left: -1.75rem;
+    margin-right: 0.5rem;
+`;
+
+export default SpinnerContainer;