diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js
new file mode 100644
index 0000000000..f69a603f5b
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Accordion, Button, Form, Segment } from 'semantic-ui-react'
+
+const panels = [
+  {
+    title: 'Optional Details',
+    content: {
+      as: Form.Input,
+      key: 'content',
+      label: 'Maiden Name',
+      placeholder: 'Maiden Name',
+    },
+  },
+]
+
+const AccordionExampleForm = () => (
+  <Segment>
+    <Form>
+      <Form.Group widths={2}>
+        <Form.Input label='First Name' placeholder='First Name' />
+        <Form.Input label='First Name' placeholder='Last Name' />
+      </Form.Group>
+      <Accordion as={Form.Field} panels={panels} />
+
+      <Button secondary>Sign Up</Button>
+    </Form>
+  </Segment>
+)
+
+export default AccordionExampleForm
diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js
new file mode 100644
index 0000000000..ec5969d5e7
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { Accordion, Form, Menu } from 'semantic-ui-react'
+
+const ColorForm = (
+  <Form>
+    <Form.Group grouped>
+      <Form.Checkbox label='Red' name='color' value='red' />
+      <Form.Checkbox label='Orange' name='color' value='orange' />
+      <Form.Checkbox label='Green' name='color' value='green' />
+      <Form.Checkbox label='Blue' name='color' value='blue' />
+    </Form.Group>
+  </Form>
+)
+
+const SizeForm = (
+  <Form>
+    <Form.Group grouped>
+      <Form.Radio label='Small' name='size' type='radio' value='small' />
+      <Form.Radio label='Medium' name='size' type='radio' value='medium' />
+      <Form.Radio label='Large' name='size' type='radio' value='large' />
+      <Form.Radio label='X-Large' name='size' type='radio' value='x-large' />
+    </Form.Group>
+  </Form>
+)
+
+export default class AccordionExampleMenu extends Component {
+  state = { activeIndex: 0 }
+
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion as={Menu} vertical>
+        <Menu.Item>
+          <Accordion.Title
+            active={activeIndex === 0}
+            content='Size'
+            index={0}
+            onClick={this.handleClick}
+          />
+          <Accordion.Content active={activeIndex === 0} content={SizeForm} />
+        </Menu.Item>
+
+        <Menu.Item>
+          <Accordion.Title
+            active={activeIndex === 1}
+            content='Colors'
+            index={1}
+            onClick={this.handleClick}
+          />
+          <Accordion.Content active={activeIndex === 1} content={ColorForm} />
+        </Menu.Item>
+      </Accordion>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js
new file mode 100644
index 0000000000..ed3c4a855f
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const level1Panels = [
+  { title: 'Level 1A', content: 'Level 1A Contents' },
+  { title: 'Level 1B', content: 'Level 1B Contents' },
+]
+
+const Level1Content = (
+  <div>
+    Welcome to level 1
+    <Accordion.Accordion panels={level1Panels} />
+  </div>
+)
+
+const level2Panels = [
+  { title: 'Level 2A', content: 'Level 2A Contents' },
+  { title: 'Level 2B', content: 'Level 2B Contents' },
+]
+
+const Level2Content = (
+  <div>
+    Welcome to level 2
+    <Accordion.Accordion panels={level2Panels} />
+  </div>
+)
+
+const rootPanels = [
+  { title: 'Level 1', content: { content: Level1Content, key: 'content-1' } },
+  { title: 'Level 2', content: { content: Level2Content, key: 'content-2' } },
+]
+
+const AccordionExampleNested = () => (
+  <Accordion defaultActiveIndex={0} panels={rootPanels} styled />
+)
+
+export default AccordionExampleNested
diff --git a/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js
new file mode 100644
index 0000000000..a358a6c5b0
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js
@@ -0,0 +1,27 @@
+import faker from 'faker'
+import _ from 'lodash'
+import React from 'react'
+import { Accordion, Label, Message } from 'semantic-ui-react'
+
+const panels = _.times(3, i => ({
+  title: {
+    content: <Label color='blue' content={faker.lorem.sentence()} />,
+    key: `title-${i}`,
+  },
+  content: {
+    content: (
+      <Message
+        info
+        header={faker.lorem.sentence()}
+        content={faker.lorem.paragraph()}
+      />
+    ),
+    key: `content-${i}`,
+  },
+}))
+
+const AccordionExampleShorthand = () => (
+  <Accordion defaultActiveIndex={1} panels={panels} />
+)
+
+export default AccordionExampleShorthand
diff --git a/docs/app/Examples/modules/Accordion/Advanced/index.js b/docs/app/Examples/modules/Accordion/Advanced/index.js
new file mode 100644
index 0000000000..c684e7e599
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Advanced/index.js
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const AccordionAdvancedExamples = () => (
+  <ExampleSection title='Advanced'>
+    <ComponentExample
+      title='Nested Accordions'
+      description='An accordion can have multiple levels of nested content.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleNested'
+    />
+    <ComponentExample
+      title='Form Fields'
+      description={[
+        'An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form',
+        'fields.',
+      ].join(' ')}
+      examplePath='modules/Accordion/Advanced/AccordionExampleForm'
+    />
+    <ComponentExample
+      title='Accordion Menu'
+      description='An accordion can be used to create content drawers inside a menu.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleMenu'
+    />
+    <ComponentExample
+      title='Shorthand'
+      description='Panels of Accordion can be rendered via shorthand prop.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleShorthand'
+    />
+  </ExampleSection>
+)
+
+export default AccordionAdvancedExamples
diff --git a/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js b/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js
deleted file mode 100644
index 9740e2436f..0000000000
--- a/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { Accordion } from 'semantic-ui-react'
-import faker from 'faker'
-import _ from 'lodash'
-
-const panels = _.times(3, () => ({
-  title: faker.lorem.sentence(),
-  content: faker.lorem.paragraphs(),
-}))
-
-const AccordionExamplePanelsProp = () => (
-  <Accordion panels={panels} />
-)
-
-export default AccordionExamplePanelsProp
diff --git a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
index 6976ce0308..2acf484bc4 100644
--- a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
@@ -1,45 +1,59 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { Accordion, Icon } from 'semantic-ui-react'
 
-const AccordionExampleStandard = () => (
-  <Accordion>
-    <Accordion.Title>
-      <Icon name='dropdown' />
-      What is a dog?
-    </Accordion.Title>
-    <Accordion.Content>
-      <p>
-        A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
-        {' '}it can be found as a welcome guest in many households across the world.
-      </p>
-    </Accordion.Content>
-    <Accordion.Title>
-      <Icon name='dropdown' />
-      What kinds of dogs are there?
-    </Accordion.Title>
-    <Accordion.Content>
-      <p>
-        There are many breeds of dogs. Each breed varies in size and temperament.
-        {' '}Owners often select a breed of dog that they find to be compatible
-        with their own lifestyle and desires from a companion.
-      </p>
-    </Accordion.Content>
-    <Accordion.Title>
-      <Icon name='dropdown' />
-      How do you acquire a dog?
-    </Accordion.Title>
-    <Accordion.Content>
-      <p>
-        Three common ways for a prospective owner to acquire a dog is from pet shops,
-        {' '}private owners, or shelters.
-      </p>
-      <p> A pet shop may be the most convenient way to buy a dog.
-        {' '}Buying a dog from a private owner allows you to assess the pedigree and
-        {' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
-        {' '}from a shelter, helps give a good home to a dog who may not find one so readily.
-      </p>
-    </Accordion.Content>
-  </Accordion>
-)
+export default class AccordionExampleStandard extends Component {
+  state = { activeIndex: 0 }
 
-export default AccordionExampleStandard
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion>
+        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What is a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          <p>
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
+            {' '}welcome guest in many households across the world.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What kinds of dogs are there?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          <p>
+            There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of
+            {' '}dog that they find to be compatible with their own lifestyle and desires from a companion.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          How do you acquire a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          <p>
+            Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
+          </p>
+          <p>
+            A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to
+            {' '}assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your
+            {' '}dog from a shelter, helps give a good home to a dog who may not find one so readily.
+          </p>
+        </Accordion.Content>
+      </Accordion>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js
new file mode 100644
index 0000000000..3232681cfd
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const panels = [
+  {
+    title: 'What is a dog?',
+    content: [
+      'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome',
+      'guest in many households across the world.',
+    ].join(' '),
+  },
+  {
+    title: 'What kinds of dogs are there?',
+    content: [
+      'There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog',
+      'that they find to be compatible with their own lifestyle and desires from a companion.',
+    ].join(' '),
+  },
+  {
+    title: 'How do you acquire a dog?',
+    content: {
+      content: (
+        <div>
+          <p>
+            Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
+          </p>
+          <p>
+            A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to
+            {' '}assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your
+            {' '}dog from a shelter, helps give a good home to a dog who may not find one so readily.
+          </p>
+        </div>
+      ),
+      key: 'content-dog',
+    },
+  },
+]
+
+const AccordionExampleStandardShorthand = () => (
+  <Accordion defaultActiveIndex={0} panels={panels} />
+)
+
+export default AccordionExampleStandardShorthand
diff --git a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
index e399c3c815..aa46fe9c44 100644
--- a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
@@ -1,15 +1,59 @@
-import _ from 'lodash'
-import faker from 'faker'
-import React from 'react'
-import { Accordion } from 'semantic-ui-react'
+import React, { Component } from 'react'
+import { Accordion, Icon } from 'semantic-ui-react'
 
-const panels = _.times(3, () => ({
-  title: faker.lorem.sentence(),
-  content: faker.lorem.paragraphs(),
-}))
+export default class AccordionExampleStyled extends Component {
+  state = { activeIndex: 0 }
 
-const AccordionExampleStyled = () => (
-  <Accordion panels={panels} styled />
-)
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
 
-export default AccordionExampleStyled
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion styled>
+        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What is a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          <p>
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
+            {' '}welcome guest in many households across the world.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What kinds of dogs are there?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          <p>
+            There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of
+            {' '}dog that they find to be compatible with their own lifestyle and desires from a companion.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          How do you acquire a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          <p>
+            Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
+          </p>
+          <p>
+            A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to
+            {' '}assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your
+            {' '}dog from a shelter, helps give a good home to a dog who may not find one so readily.
+          </p>
+        </Accordion.Content>
+      </Accordion>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Accordion/Types/index.js b/docs/app/Examples/modules/Accordion/Types/index.js
index c1db7b86ab..19a11b3980 100644
--- a/docs/app/Examples/modules/Accordion/Types/index.js
+++ b/docs/app/Examples/modules/Accordion/Types/index.js
@@ -1,9 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-import { Message } from 'semantic-ui-react'
-
 const AccordionTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
@@ -12,14 +11,9 @@ const AccordionTypesExamples = () => (
       examplePath='modules/Accordion/Types/AccordionExampleStandard'
     />
     <ComponentExample
-      description={<div>An Accordion can be defined using the <code>panels</code> prop.</div>}
-      examplePath='modules/Accordion/Types/AccordionExamplePanelsProp'
-    >
-      <Message info>
-        Panel objects can define an <code>active</code> key to open/close the panel.
-        {' '}They can also define an <code>onClick</code> key to be applied to the <code>Accordion.Title</code>.
-      </Message>
-    </ComponentExample>
+      description='Accordion can be rendered via shorthand prop. It will automatically manage the component state.'
+      examplePath='modules/Accordion/Types/AccordionExampleStandardShorthand'
+    />
     <ComponentExample
       title='Styled'
       description='A styled accordion adds basic formatting.'
diff --git a/docs/app/Examples/modules/Accordion/Usage/AccordionExampleActiveIndex.js b/docs/app/Examples/modules/Accordion/Usage/AccordionExampleActiveIndex.js
index 01db5b564a..2b7c0ba7d3 100644
--- a/docs/app/Examples/modules/Accordion/Usage/AccordionExampleActiveIndex.js
+++ b/docs/app/Examples/modules/Accordion/Usage/AccordionExampleActiveIndex.js
@@ -1,44 +1,44 @@
 import faker from 'faker'
 import _ from 'lodash'
 import React, { Component } from 'react'
-import { Accordion } from 'semantic-ui-react'
+import { Accordion, Segment } from 'semantic-ui-react'
 
 const panels = _.times(3, () => ({
   title: faker.lorem.sentence(),
   content: faker.lorem.paragraphs(),
 }))
 
-class AccordionExampleActiveIndex extends Component {
+export default class AccordionExampleActiveIndex extends Component {
   state = { activeIndex: 0 }
 
-  handleSliderChange = e => this.setState({
-    activeIndex: Number(e.target.value),
-  })
+  handleSliderChange = e => this.setState({ activeIndex: Number(e.target.value) })
 
-  handleTitleClick = (e, i) => this.setState({
-    activeIndex: this.state.activeIndex === i ? -1 : i,
-  })
+  handleTitleClick = (e, itemProps) => {
+    const { index } = itemProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
 
   render() {
     const { activeIndex } = this.state
+
     return (
       <div>
-        <div>activeIndex: {activeIndex}</div>
-        <input
-          type='range'
-          min='-1'
-          max={panels.length - 1}
-          value={activeIndex}
-          onChange={this.handleSliderChange}
-        />
-        <Accordion
-          activeIndex={activeIndex}
-          panels={panels}
-          onTitleClick={this.handleTitleClick}
-        />
+        <Segment secondary>
+          <div>activeIndex: {activeIndex}</div>
+          <input
+            type='range'
+            min='-1'
+            max={panels.length - 1}
+            value={activeIndex}
+            onChange={this.handleSliderChange}
+          />
+        </Segment>
+
+        <Accordion activeIndex={activeIndex} panels={panels} onTitleClick={this.handleTitleClick} />
       </div>
     )
   }
 }
-
-export default AccordionExampleActiveIndex
diff --git a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleExclusive.js b/docs/app/Examples/modules/Accordion/Usage/AccordionExampleExclusive.js
similarity index 79%
rename from docs/app/Examples/modules/Accordion/Variations/AccordionExampleExclusive.js
rename to docs/app/Examples/modules/Accordion/Usage/AccordionExampleExclusive.js
index f123b8923e..0d699e3228 100644
--- a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleExclusive.js
+++ b/docs/app/Examples/modules/Accordion/Usage/AccordionExampleExclusive.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 
@@ -9,7 +9,7 @@ const panels = _.times(3, () => ({
 }))
 
 const AccordionExampleExclusive = () => (
-  <Accordion panels={panels} exclusive={false} fluid />
+  <Accordion defaultActiveIndex={[0, 2]} panels={panels} exclusive={false} fluid />
 )
 
 export default AccordionExampleExclusive
diff --git a/docs/app/Examples/modules/Accordion/Usage/AccordionExamplePanelsPropWithCustomTitleAndContent.js b/docs/app/Examples/modules/Accordion/Usage/AccordionExamplePanelsPropWithCustomTitleAndContent.js
deleted file mode 100644
index 5905dbb705..0000000000
--- a/docs/app/Examples/modules/Accordion/Usage/AccordionExamplePanelsPropWithCustomTitleAndContent.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { Accordion, Label, Message } from 'semantic-ui-react'
-import faker from 'faker'
-import _ from 'lodash'
-
-const panels = _.times(3, i => ({
-  key: `panel-${i}`,
-  title: <Label color='blue' content={faker.lorem.sentence()} />,
-  content: (
-    <Message
-      info
-      header={faker.lorem.sentence()}
-      content={faker.lorem.paragraph()}
-    />
-  ),
-}))
-
-const AccordionExamplePanelsPropWithCustomTitleAndContent = () => (
-  <Accordion panels={panels} />
-)
-
-export default AccordionExamplePanelsPropWithCustomTitleAndContent
diff --git a/docs/app/Examples/modules/Accordion/Usage/index.js b/docs/app/Examples/modules/Accordion/Usage/index.js
index d937e4317d..9cc745bdfa 100644
--- a/docs/app/Examples/modules/Accordion/Usage/index.js
+++ b/docs/app/Examples/modules/Accordion/Usage/index.js
@@ -3,24 +3,17 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-import { Message } from 'semantic-ui-react'
-
 const AccordionUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
       title='Active Index'
       description='The `activeIndex` prop controls which panel is open.'
       examplePath='modules/Accordion/Usage/AccordionExampleActiveIndex'
-    >
-      <Message info>
-        An <code>active</code> prop on an
-        {' '}<code>&lt;Accordion.Title&gt;</code> or <code>&lt;Accordion.Content&gt;</code>
-        {' '}will override the <code>&lt;Accordion&gt;</code> <code>&lt;activeIndex&gt;</code> prop.
-      </Message>
-    </ComponentExample>
+    />
     <ComponentExample
-      title='Panels Prop with custom title and content'
-      examplePath='modules/Accordion/Usage/AccordionExamplePanelsPropWithCustomTitleAndContent'
+      title='Exclusive'
+      description='An accordion can have multiple panels open at the same time.'
+      examplePath='modules/Accordion/Usage/AccordionExampleExclusive'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
index 9a68aed9cb..25ae84b756 100644
--- a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
+++ b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
@@ -1,15 +1,59 @@
-import _ from 'lodash'
-import faker from 'faker'
-import React from 'react'
-import { Accordion } from 'semantic-ui-react'
+import React, { Component } from 'react'
+import { Accordion, Icon } from 'semantic-ui-react'
 
-const panels = _.times(3, () => ({
-  title: faker.lorem.sentence(),
-  content: faker.lorem.paragraphs(),
-}))
+export default class AccordionExampleFluid extends Component {
+  state = { activeIndex: 0 }
 
-const AccordionExampleFluid = () => (
-  <Accordion panels={panels} fluid />
-)
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
 
-export default AccordionExampleFluid
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion fluid styled>
+        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What is a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          <p>
+            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
+            {' '}welcome guest in many households across the world.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What kinds of dogs are there?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          <p>
+            There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of
+            {' '}dog that they find to be compatible with their own lifestyle and desires from a companion.
+          </p>
+        </Accordion.Content>
+
+        <Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          How do you acquire a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          <p>
+            Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
+          </p>
+          <p>
+            A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to
+            {' '}assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your
+            {' '}dog from a shelter, helps give a good home to a dog who may not find one so readily.
+          </p>
+        </Accordion.Content>
+      </Accordion>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
index 485ba47c6a..b47a243b01 100644
--- a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
+++ b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
@@ -1,17 +1,61 @@
-import _ from 'lodash'
-import faker from 'faker'
-import React from 'react'
-import { Accordion, Segment } from 'semantic-ui-react'
+import React, { Component } from 'react'
+import { Accordion, Icon, Segment } from 'semantic-ui-react'
 
-const panels = _.times(3, () => ({
-  title: faker.lorem.sentence(),
-  content: faker.lorem.paragraphs(),
-}))
+export default class AccordionExampleInverted extends Component {
+  state = { activeIndex: 0 }
 
-const AccordionExampleInverted = () => (
-  <Segment inverted>
-    <Accordion panels={panels} inverted />
-  </Segment>
-)
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
 
-export default AccordionExampleInverted
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Segment inverted>
+        <Accordion inverted>
+          <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
+            <Icon name='dropdown' />
+            What is a dog?
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 0}>
+            <p>
+              A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a
+              {' '}welcome guest in many households across the world.
+            </p>
+          </Accordion.Content>
+
+          <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
+            <Icon name='dropdown' />
+            What kinds of dogs are there?
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 1}>
+            <p>
+              There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of
+              {' '}dog that they find to be compatible with their own lifestyle and desires from a companion.
+            </p>
+          </Accordion.Content>
+
+          <Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
+            <Icon name='dropdown' />
+            How do you acquire a dog?
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 2}>
+            <p>
+              Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
+            </p>
+            <p>
+              A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to
+              {' '}assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your
+              {' '}dog from a shelter, helps give a good home to a dog who may not find one so readily.
+            </p>
+          </Accordion.Content>
+        </Accordion>
+      </Segment>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Accordion/Variations/index.js b/docs/app/Examples/modules/Accordion/Variations/index.js
index 1e3da67ba2..0c070d76e2 100644
--- a/docs/app/Examples/modules/Accordion/Variations/index.js
+++ b/docs/app/Examples/modules/Accordion/Variations/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
@@ -14,11 +15,6 @@ const AccordionTypesExamples = () => (
       description='An accordion can be formatted to appear on dark backgrounds.'
       examplePath='modules/Accordion/Variations/AccordionExampleInverted'
     />
-    <ComponentExample
-      title='Exclusive'
-      description='An accordion can have multiple panels open at the same time.'
-      examplePath='modules/Accordion/Variations/AccordionExampleExclusive'
-    />
   </ExampleSection>
 )
 
diff --git a/docs/app/Examples/modules/Accordion/index.js b/docs/app/Examples/modules/Accordion/index.js
index 5b5da95be1..ba62cb462a 100644
--- a/docs/app/Examples/modules/Accordion/index.js
+++ b/docs/app/Examples/modules/Accordion/index.js
@@ -1,4 +1,6 @@
 import React from 'react'
+
+import Advanced from './Advanced'
 import Types from './Types'
 import Variations from './Variations'
 import Usage from './Usage'
@@ -8,6 +10,7 @@ const AccordionExamples = () => (
     <Types />
     <Variations />
     <Usage />
+    <Advanced />
   </div>
 )
 
diff --git a/index.d.ts b/index.d.ts
index 167d3b1842..ea87944c3b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -116,6 +116,11 @@ export * from './dist/commonjs';
 
 // Modules
 export { default as Accordion, AccordionProps } from './dist/commonjs/modules/Accordion/Accordion';
+export {
+  default as AccordionAccordion,
+  AccordionAccordionProps,
+  AccordionPanelProps
+} from './dist/commonjs/modules/Accordion/AccordionAccordion';
 export { default as AccordionContent, AccordionContentProps } from './dist/commonjs/modules/Accordion/AccordionContent';
 export { default as AccordionTitle, AccordionTitleProps } from './dist/commonjs/modules/Accordion/AccordionTitle';
 
diff --git a/src/index.js b/src/index.js
index 356e9e74cb..1fb972d099 100644
--- a/src/index.js
+++ b/src/index.js
@@ -101,6 +101,7 @@ export { default as StepTitle } from './elements/Step/StepTitle'
 
 // Modules
 export { default as Accordion } from './modules/Accordion/Accordion'
+export { default as AccordionAccordion } from './modules/Accordion/AccordionAccordion'
 export { default as AccordionContent } from './modules/Accordion/AccordionContent'
 export { default as AccordionTitle } from './modules/Accordion/AccordionTitle'
 
diff --git a/src/modules/Accordion/Accordion.d.ts b/src/modules/Accordion/Accordion.d.ts
index 84c53a2f47..23c29b748f 100644
--- a/src/modules/Accordion/Accordion.d.ts
+++ b/src/modules/Accordion/Accordion.d.ts
@@ -1,56 +1,27 @@
 import * as React from 'react';
 
+import { default as AccordionAccordion, AccordionAccordionProps } from './AccordionAccordion';
 import { default as AccordionContent } from './AccordionContent';
 import { default as AccordionTitle } from './AccordionTitle';
 
-export interface AccordionProps {
+export interface AccordionProps extends AccordionAccordionProps {
   [key: string]: any;
 
-  /** An element type to render as (string or function). */
-  as?: any;
-
-  /** Index of the currently active panel. */
-  activeIndex?: number | number[];
-
-  /** Primary content. */
-  children?: React.ReactNode;
-
   /** Additional classes. */
   className?: string;
 
-  /** Initial activeIndex value. */
-  defaultActiveIndex?: number | number[];
-
-  /** Only allow one panel open at a time. */
-  exclusive?: boolean;
-
   /** Format to take up the width of it's container. */
   fluid?: boolean;
 
   /** Format for dark backgrounds. */
   inverted?: boolean;
 
-  /**
-   * Called when a panel title is clicked.
-   *
-   * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {number} index - The index of the clicked panel.
-   */
-  onTitleClick?: (event: React.MouseEvent<HTMLDivElement>, index: number | number[]) => void;
-
-  /**
-   * Create simple accordion panels from an array of { text: <custom>, content: <custom> } objects.
-   * Object can optionally define an `active` key to open/close the panel.
-   * Object can opitonally define a `key` key used for title and content nodes' keys.
-   * Mutually exclusive with children.
-   */
-  panels?: Array<any>;
-
   /** Adds some basic styling to accordion panels. */
   styled?: boolean;
 }
 
 interface AccordionComponent extends React.ComponentClass<AccordionProps> {
+  Accordion: typeof AccordionAccordion;
   Content: typeof AccordionContent;
   Title: typeof AccordionTitle;
 }
diff --git a/src/modules/Accordion/Accordion.js b/src/modules/Accordion/Accordion.js
index 44c675ffbe..8aca1a4d1a 100644
--- a/src/modules/Accordion/Accordion.js
+++ b/src/modules/Accordion/Accordion.js
@@ -1,203 +1,60 @@
 import cx from 'classnames'
-import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Children, cloneElement } from 'react'
+import React from 'react'
 
 import {
-  AutoControlledComponent as Component,
-  customPropTypes,
-  getElementType,
+  getUnhandledProps,
   META,
   useKeyOnly,
 } from '../../lib'
-
+import AccordionAccordion from './AccordionAccordion'
 import AccordionContent from './AccordionContent'
 import AccordionTitle from './AccordionTitle'
 
 /**
  * An accordion allows users to toggle the display of sections of content.
  */
-export default class Accordion extends Component {
-  static propTypes = {
-    /** An element type to render as (string or function). */
-    as: customPropTypes.as,
-
-    /** Index of the currently active panel. */
-    activeIndex: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.number,
-    ]),
-
-    /** Primary content. */
-    children: PropTypes.node,
-
-    /** Additional classes. */
-    className: PropTypes.string,
-
-    /** Initial activeIndex value. */
-    defaultActiveIndex: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.number,
-    ]),
-
-    /** Only allow one panel open at a time. */
-    exclusive: PropTypes.bool,
-
-    /** Format to take up the width of it's container. */
-    fluid: PropTypes.bool,
-
-    /** Format for dark backgrounds. */
-    inverted: PropTypes.bool,
-
-    /**
-     * Called when a panel title is clicked.
-     *
-     * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {number} index - The index of the clicked panel.
-     */
-    onTitleClick: PropTypes.func,
-
-    /**
-     * Create simple accordion panels from an array of { text: <string>, content: <custom> } objects.
-     * Object can optionally define an `active` key to open/close the panel.
-     * Object can opitonally define a `key` key used for title and content nodes' keys.
-     * Mutually exclusive with children.
-     * TODO: AccordionPanel should be a sub-component
-     */
-    panels: customPropTypes.every([
-      customPropTypes.disallow(['children']),
-      PropTypes.arrayOf(PropTypes.shape({
-        key: PropTypes.string,
-        active: PropTypes.bool,
-        title: customPropTypes.contentShorthand,
-        content: customPropTypes.contentShorthand,
-        onClick: PropTypes.func,
-      })),
-    ]),
-
-    /** Adds some basic styling to accordion panels. */
-    styled: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    exclusive: true,
-  }
-
-  static autoControlledProps = [
-    'activeIndex',
-  ]
-
-  static _meta = {
-    name: 'Accordion',
-    type: META.TYPES.MODULE,
-  }
-
-  static Content = AccordionContent
-  static Title = AccordionTitle
-
-  getInitialAutoControlledState({ exclusive }) {
-    return { activeIndex: exclusive ? -1 : [-1] }
-  }
-
-  handleTitleClick = (e, index) => {
-    const { onTitleClick, exclusive } = this.props
-    const { activeIndex } = this.state
-
-    let newIndex
-    if (exclusive) {
-      newIndex = index === activeIndex ? -1 : index
-    } else {
-      // check to see if index is in array, and remove it, if not then add it
-      newIndex = _.includes(activeIndex, index) ? _.without(activeIndex, index) : [...activeIndex, index]
-    }
-    this.trySetState({ activeIndex: newIndex })
-    if (onTitleClick) onTitleClick(e, index)
-  }
-
-  isIndexActive = (index) => {
-    const { exclusive } = this.props
-    const { activeIndex } = this.state
-    return exclusive ? activeIndex === index : _.includes(activeIndex, index)
-  }
-
-  renderChildren = () => {
-    const { children } = this.props
-    let titleIndex = 0
-    let contentIndex = 0
-
-    return Children.map(children, (child) => {
-      const isTitle = child.type === AccordionTitle
-      const isContent = child.type === AccordionContent
-
-      if (isTitle) {
-        const currentIndex = titleIndex
-        const isActive = _.has(child, 'props.active') ? child.props.active : this.isIndexActive(titleIndex)
-        const onClick = (e) => {
-          this.handleTitleClick(e, currentIndex)
-          if (child.props.onClick) child.props.onClick(e, currentIndex)
-        }
-        titleIndex += 1
-        return cloneElement(child, { ...child.props, active: isActive, onClick })
-      }
-
-      if (isContent) {
-        const isActive = _.has(child, 'props.active') ? child.props.active : this.isIndexActive(contentIndex)
-        contentIndex += 1
-        return cloneElement(child, { ...child.props, active: isActive })
-      }
-
-      return child
-    })
-  }
-
-  renderPanels = () => {
-    const { panels } = this.props
-    const children = []
+function Accordion(props) {
+  const {
+    className,
+    fluid,
+    inverted,
+    styled,
+  } = props
+
+  const classes = cx(
+    'ui',
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(styled, 'styled'),
+    className,
+  )
+  const rest = getUnhandledProps(Accordion, props)
+
+  return <AccordionAccordion {...rest} className={classes} />
+}
 
-    _.each(panels, (panel, i) => {
-      const isActive = _.has(panel, 'active') ? panel.active : this.isIndexActive(i)
-      const onClick = (e) => {
-        this.handleTitleClick(e, i)
-        if (panel.onClick) panel.onClick(e, i)
-      }
+Accordion._meta = {
+  name: 'Accordion',
+  type: META.TYPES.MODULE,
+}
 
-      // implement all methods of creating a key that are supported in factories
-      const key = panel.key
-        || (_.isFunction(panel.childKey) && panel.childKey(panel))
-        || (panel.childKey && panel.childKey)
-        || panel.title
+Accordion.propTypes = {
+  /** Additional classes. */
+  className: PropTypes.string,
 
-      children.push(AccordionTitle.create({ active: isActive, onClick, key: `${key}-title`, content: panel.title }))
-      children.push(AccordionContent.create({ active: isActive, key: `${key}-content`, content: panel.content }))
-    })
+  /** Format to take up the width of it's container. */
+  fluid: PropTypes.bool,
 
-    return children
-  }
+  /** Format for dark backgrounds. */
+  inverted: PropTypes.bool,
 
-  render() {
-    const {
-      className,
-      fluid,
-      inverted,
-      panels,
-      styled,
-    } = this.props
+  /** Adds some basic styling to accordion panels. */
+  styled: PropTypes.bool,
+}
 
-    const classes = cx(
-      'ui',
-      useKeyOnly(fluid, 'fluid'),
-      useKeyOnly(inverted, 'inverted'),
-      useKeyOnly(styled, 'styled'),
-      'accordion',
-      className,
-    )
-    const rest = _.omit(this.props, _.keys(Accordion.propTypes))
-    const ElementType = getElementType(Accordion, this.props)
+Accordion.Accordion = AccordionAccordion
+Accordion.Content = AccordionContent
+Accordion.Title = AccordionTitle
 
-    return (
-      <ElementType {...rest} className={classes}>
-        {panels ? this.renderPanels() : this.renderChildren()}
-      </ElementType>
-    )
-  }
-}
+export default Accordion
diff --git a/src/modules/Accordion/AccordionAccordion.d.ts b/src/modules/Accordion/AccordionAccordion.d.ts
new file mode 100644
index 0000000000..d7ce7e5f39
--- /dev/null
+++ b/src/modules/Accordion/AccordionAccordion.d.ts
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { SemanticShorthandCollection, SemanticShorthandItem } from '../../';
+import { AccordionContentProps } from './AccordionContent';
+import { AccordionTitleProps } from './AccordionTitle';
+
+export interface AccordionAccordionProps {
+  [key: string]: any;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Index of the currently active panel. */
+  activeIndex?: number | number[];
+
+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** Additional classes. */
+  className?: string;
+
+  /** Initial activeIndex value. */
+  defaultActiveIndex?: number | number[];
+
+  /** Only allow one panel open at a time. */
+  exclusive?: boolean;
+
+  /**
+   * Called when a panel title is clicked.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {number} index - The index of the clicked panel.
+   */
+  onTitleClick?: (event: React.MouseEvent<HTMLDivElement>, index: number | number[]) => void;
+
+  /** Shorthand array of props for Accordion. */
+  panels?: SemanticShorthandCollection<AccordionPanelProps>;
+}
+
+export interface AccordionPanelProps {
+  content: SemanticShorthandItem<AccordionContentProps>;
+  title: SemanticShorthandItem<AccordionTitleProps>;
+}
+
+declare const AccordionAccordion: AccordionAccordionProps;
+
+export default AccordionAccordion;
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
new file mode 100644
index 0000000000..5b75a7e7bc
--- /dev/null
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -0,0 +1,154 @@
+import cx from 'classnames'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import {
+  AutoControlledComponent as Component,
+  createShorthandFactory,
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
+import AccordionContent from './AccordionContent'
+import AccordionTitle from './AccordionTitle'
+
+/**
+ * An Accordion can contain sub-accordions.
+ */
+export default class AccordionAccordion extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Index of the currently active panel. */
+    activeIndex: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.number),
+        PropTypes.number,
+      ]),
+    ]),
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** Initial activeIndex value. */
+    defaultActiveIndex: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.number),
+        PropTypes.number,
+      ]),
+    ]),
+
+    /** Only allow one panel open at a time. */
+    exclusive: PropTypes.bool,
+
+    /**
+     * Called when a panel title is clicked.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All item props.
+     */
+    onTitleClick: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.func,
+    ]),
+
+    /** Shorthand array of props for Accordion. */
+    panels: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          content: customPropTypes.itemShorthand,
+          title: customPropTypes.itemShorthand,
+        }),
+      ),
+    ]),
+  }
+
+  static defaultProps = {
+    exclusive: true,
+  }
+
+  static autoControlledProps = [
+    'activeIndex',
+  ]
+
+  static _meta = {
+    name: 'AccordionAccordion',
+    type: META.TYPES.MODULE,
+    parent: 'Accordion',
+  }
+
+  getInitialAutoControlledState({ exclusive }) {
+    return { activeIndex: exclusive ? -1 : [-1] }
+  }
+
+  computeNewIndex = (index) => {
+    const { exclusive } = this.props
+    const { activeIndex } = this.state
+
+    if (exclusive) return index === activeIndex ? -1 : index
+    // check to see if index is in array, and remove it, if not then add it
+    return _.includes(activeIndex, index) ? _.without(activeIndex, index) : [...activeIndex, index]
+  }
+
+  handleTitleOverrides = predefinedProps => ({
+    onClick: (e, titleProps) => {
+      const { index } = titleProps
+      const activeIndex = this.computeNewIndex(index)
+
+      this.trySetState({ activeIndex })
+
+      _.invoke(predefinedProps, 'onClick', e, titleProps)
+      _.invoke(this.props, 'onTitleClick', e, titleProps)
+    },
+  })
+
+  isIndexActive = (index) => {
+    const { exclusive } = this.props
+    const { activeIndex } = this.state
+
+    return exclusive ? activeIndex === index : _.includes(activeIndex, index)
+  }
+
+  renderPanels = () => {
+    const children = []
+    const { panels } = this.props
+
+    _.each(panels, (panel, index) => {
+      const { content, title } = panel
+      const active = this.isIndexActive(index)
+
+      children.push(AccordionTitle.create(title, {
+        defaultProps: { active, index },
+        overrideProps: this.handleTitleOverrides,
+      }))
+      children.push(AccordionContent.create(content, { defaultProps: { active } }))
+    })
+
+    return children
+  }
+
+  render() {
+    const { className, children } = this.props
+
+    const classes = cx('accordion', className)
+    const rest = getUnhandledProps(AccordionAccordion, this.props)
+    const ElementType = getElementType(AccordionAccordion, this.props)
+
+    return (
+      <ElementType {...rest} className={classes}>
+        {_.isNil(children) ? this.renderPanels() : children}
+      </ElementType>
+    )
+  }
+}
+
+AccordionAccordion.create = createShorthandFactory(AccordionAccordion, content => ({ content }))
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 1baac6d008..4c9e16156d 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -4,12 +4,12 @@ import React from 'react'
 
 import {
   childrenUtils,
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
   useKeyOnly,
-  createShorthandFactory,
 } from '../../lib'
 
 /**
diff --git a/src/modules/Accordion/AccordionTitle.d.ts b/src/modules/Accordion/AccordionTitle.d.ts
index 1a10b93e90..08ac8c1319 100644
--- a/src/modules/Accordion/AccordionTitle.d.ts
+++ b/src/modules/Accordion/AccordionTitle.d.ts
@@ -19,6 +19,9 @@ export interface AccordionTitleProps {
   /** Shorthand for primary content. */
   content?: SemanticShorthandContent;
 
+  /** AccordionTitle index inside Accordion. */
+  index?: number | string;
+
   /**
    * Called on click.
    *
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index dd7c05619c..f9e8a7cbfe 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -4,14 +4,13 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
   useKeyOnly,
-  createShorthandFactory,
 } from '../../lib'
-
 import Icon from '../../elements/Icon'
 
 /**
@@ -34,6 +33,9 @@ export default class AccordionTitle extends Component {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
+    /** AccordionTitle index inside Accordion. */
+    index: PropTypes.number,
+
     /**
      * Called on click.
      *
@@ -49,11 +51,7 @@ export default class AccordionTitle extends Component {
     parent: 'Accordion',
   }
 
-  handleClick = (e) => {
-    const { onClick } = this.props
-
-    if (onClick) onClick(e, this.props)
-  }
+  handleClick = e => _.invoke(this.props, 'onClick', e, this.props)
 
   render() {
     const {
@@ -72,11 +70,7 @@ export default class AccordionTitle extends Component {
     const ElementType = getElementType(AccordionTitle, this.props)
 
     if (_.isNil(content)) {
-      return (
-        <ElementType {...rest} className={classes} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
+      return <ElementType {...rest} className={classes} onClick={this.handleClick}>{children}</ElementType>
     }
 
     return (
diff --git a/test/specs/modules/Accordion/Accordion-test.js b/test/specs/modules/Accordion/Accordion-test.js
index c494e6a2f7..267bfeef41 100644
--- a/test/specs/modules/Accordion/Accordion-test.js
+++ b/test/specs/modules/Accordion/Accordion-test.js
@@ -1,388 +1,22 @@
-import faker from 'faker'
 import React from 'react'
 
 import Accordion from 'src/modules/Accordion/Accordion'
+import AccordionAccordion from 'src/modules/Accordion/AccordionAccordion'
 import AccordionContent from 'src/modules/Accordion/AccordionContent'
 import AccordionTitle from 'src/modules/Accordion/AccordionTitle'
 import * as common from 'test/specs/commonTests'
-import { consoleUtil, sandbox } from 'test/utils'
 
 describe('Accordion', () => {
   common.isConformant(Accordion)
+  common.hasSubComponents(Accordion, [AccordionAccordion, AccordionContent, AccordionTitle])
   common.hasUIClassName(Accordion)
-  common.rendersChildren(Accordion)
-  common.hasSubComponents(Accordion, [AccordionContent, AccordionTitle])
+
   common.propKeyOnlyToClassName(Accordion, 'fluid')
   common.propKeyOnlyToClassName(Accordion, 'inverted')
   common.propKeyOnlyToClassName(Accordion, 'styled')
 
-  describe('activeIndex', () => {
-    it('defaults to -1', () => {
-      shallow(<Accordion />)
-        .should.have.state('activeIndex', -1)
-    })
-    it('can be overridden with "active" on Title/Content', () => {
-      const wrapper = mount(
-        <Accordion activeIndex={0}>
-          <Accordion.Title active={false} />
-          <Accordion.Content active={false} />
-          <Accordion.Title active />
-          <Accordion.Content active />
-        </Accordion>,
-      )
-      const titles = wrapper.find('AccordionTitle')
-      const contents = wrapper.find('AccordionContent')
-
-      titles.at(0).should.not.have.className('active')
-      contents.at(0).should.not.have.className('active')
-
-      titles.at(1).should.have.className('active')
-      contents.at(1).should.have.className('active')
-    })
-    it('makes Accordion.Content at activeIndex - 1 "active"', () => {
-      const contents = shallow(
-        <Accordion activeIndex={0}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-        .find('AccordionContent')
-
-      contents.at(0).should.have.prop('active', true)
-      contents.at(1).should.have.prop('active', false)
-    })
-    it('is toggled to -1 when clicking Title a second time', () => {
-      const wrapper = mount(
-        <Accordion>
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-
-      // open panel (activeIndex 0)
-      wrapper
-        .find('AccordionTitle')
-        .simulate('click')
-        .should.have.className('active')
-      wrapper
-        .should.have.state('activeIndex', 0)
-
-      // close panel (activeIndex -1)
-      wrapper
-        .find('AccordionTitle')
-        .simulate('click')
-        .should.not.have.className('active')
-      wrapper
-        .should.have.state('activeIndex', -1)
-    })
-    it('sets the correct pair of title/content active', () => {
-      const wrapper = shallow(
-        <Accordion>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-      wrapper.setProps({ activeIndex: 0 })
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', true)
-
-      wrapper.setProps({ activeIndex: 1 })
-      wrapper.childAt(2).should.have.prop('active', true)
-      wrapper.childAt(3).should.have.prop('active', true)
-
-      wrapper.setProps({ activeIndex: 2 })
-      wrapper.childAt(4).should.have.prop('active', true)
-      wrapper.childAt(5).should.have.prop('active', true)
-    })
-
-    it('can be an array', () => {
-      const wrapper = shallow(
-        <Accordion exclusive={false}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-      wrapper.setProps({ activeIndex: [0, 1] })
-      wrapper.childAt(0).should.have.prop('active', true)
-      wrapper.childAt(1).should.have.prop('active', true)
-      wrapper.childAt(2).should.have.prop('active', true)
-      wrapper.childAt(3).should.have.prop('active', true)
-
-      wrapper.setProps({ activeIndex: [1, 2] })
-      wrapper.childAt(2).should.have.prop('active', true)
-      wrapper.childAt(3).should.have.prop('active', true)
-      wrapper.childAt(4).should.have.prop('active', true)
-      wrapper.childAt(5).should.have.prop('active', true)
-    })
-
-    it('can be inclusive and makes Accordion.Content at activeIndex - 1 "active"', () => {
-      const contents = shallow(
-        <Accordion exclusive={false} defaultActiveIndex={[0]}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-        .find('AccordionTitle')
-
-      contents.at(0).should.have.prop('active', true)
-      contents.at(1).should.have.prop('active', false)
-    })
-
-    it('can be inclusive and allows multiple open', () => {
-      const contents = shallow(
-        <Accordion exclusive={false} defaultActiveIndex={[0, 1]}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-        .find('AccordionTitle')
-
-      contents.at(0).should.have.prop('active', true)
-      contents.at(1).should.have.prop('active', true)
-    })
-
-    it('can be inclusive and can open multiple panels by clicking', () => {
-      const wrapper = mount(
-        <Accordion exclusive={false}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-      const titles = wrapper.find('AccordionTitle')
-      const contents = wrapper.find('AccordionContent')
-
-      titles
-        .at(0)
-        .simulate('click')
-        .should.have.prop('active', true)
-      titles
-        .at(1)
-        .simulate('click')
-        .should.have.prop('active', true)
-      contents.at(0).should.have.prop('active', true)
-      contents.at(1).should.have.prop('active', true)
-    })
-
-    it('can be inclusive and close multiple panels by clicking', () => {
-      const wrapper = mount(
-        <Accordion exclusive={false} defaultActiveIndex={[0, 1]}>
-          <Accordion.Title />
-          <Accordion.Content />
-          <Accordion.Title />
-          <Accordion.Content />
-        </Accordion>,
-      )
-      const titles = wrapper.find('AccordionTitle')
-      const contents = wrapper.find('AccordionContent')
-
-      titles
-        .at(0)
-        .simulate('click')
-        .should.have.prop('active', false)
-      titles
-        .at(1)
-        .simulate('click')
-        .should.have.prop('active', false)
-      contents.at(0).should.have.prop('active', false)
-      contents.at(1).should.have.prop('active', false)
-    })
-  })
-
-  describe('defaultActiveIndex', () => {
-    it('sets the initial activeIndex state', () => {
-      shallow(<Accordion defaultActiveIndex={123} />)
-        .should.have.state('activeIndex', 123)
-    })
-  })
-
-  describe('onTitleClick', () => {
-    it('is called with (event, index)', () => {
-      const spy = sandbox.spy()
-      const event = { foo: 'bar' }
-      const titles = mount(
-        <Accordion onTitleClick={spy}>
-          <Accordion.Title />
-          <Accordion.Title />
-        </Accordion>,
-      )
-        .find('AccordionTitle')
-
-      titles.at(0).simulate('click', event)
-      spy.should.have.been.calledWithMatch(event, 0)
-
-      titles.at(1).simulate('click', event)
-      spy.should.have.been.calledWithMatch(event, 1)
-    })
-  })
-
-  describe('panels', () => {
-    it('does not render children', () => {
-      consoleUtil.disableOnce()
-      shallow(
-        <Accordion panels={[]}>
-          <div id='do-not-find-me' />
-        </Accordion>,
-      )
-        .should.not.have.descendants('#do-not-find-me')
-    })
-
-    it('adds text title and text content sibling children', () => {
-      const panels = [{
-        title: faker.lorem.sentence(),
-        content: faker.lorem.paragraph(),
-      }]
-      const wrapper = mount(<Accordion panels={panels} />)
-
-      wrapper
-        .childAt(0)
-        .should.have.className('title')
-        .and.contain.text(panels[0].title)
-
-      expect(wrapper.childAt(0).key()).to.equal(`${panels[0].title}-title`)
-
-      wrapper
-        .childAt(1)
-        .should.have.className('content')
-        .and.contain.text(panels[0].content)
-
-      expect(wrapper.childAt(1).key()).to.equal(`${panels[0].title}-content`)
-    })
-
-    it('adds custom element title and custom element content sibling children', () => {
-      const panels = [{
-        key: 'panel-1',
-        title: (<h1>{faker.lorem.sentence()}</h1>),
-        content: (<h2>{faker.lorem.paragraph()}</h2>),
-      }]
-      const wrapper = mount(<Accordion panels={panels} />)
-
-      wrapper
-        .childAt(0)
-        .should.have.className('title')
-        .and.contain(panels[0].title)
-
-      expect(wrapper.childAt(0).key()).to.equal('panel-1-title')
-
-      wrapper
-        .childAt(1)
-        .should.have.className('content')
-        .and.contain(panels[0].content)
-
-      expect(wrapper.childAt(1).key()).to.equal('panel-1-content')
-    })
-
-    const checkIfAllowsSettingTheActiveProp = (panels) => {
-      const wrapper = shallow(<Accordion panels={panels} />)
-
-      // first panel (active)
-
-      wrapper
-        .find('AccordionTitle')
-        .at(0)
-        .should.have.prop('active', true)
-
-      wrapper
-        .find('AccordionContent')
-        .at(0)
-        .should.have.prop('active', true)
-
-      // second panel (not active)
-
-      wrapper
-        .find('AccordionTitle')
-        .at(1)
-        .should.have.prop('active', false)
-
-      wrapper
-        .find('AccordionContent')
-        .at(1)
-        .should.have.prop('active', false)
-    }
-
-    it('allows setting the active prop', () => {
-      const panels = [{
-        active: true,
-        title: faker.lorem.sentence(),
-        content: faker.lorem.paragraph(),
-      }, {
-        active: false,
-        title: faker.lorem.sentence(),
-        content: faker.lorem.paragraph(),
-      }]
-
-      checkIfAllowsSettingTheActiveProp(panels)
-    })
-
-    it('allows setting the active prop for custom title and content', () => {
-      const panels = [{
-        active: true,
-        title: (<div>faker.lorem.sentence()</div>),
-        content: (<p>faker.lorem.paragraph()</p>),
-      }, {
-        active: false,
-        title: (<h1>faker.lorem.sentence()</h1>),
-        content: (<h3>faker.lorem.paragraph()</h3>),
-      }]
-
-      checkIfAllowsSettingTheActiveProp(panels)
-    })
-
-    describe('onClick', () => {
-      it('can be omitted', () => {
-        const panels = [{
-          title: faker.lorem.sentence(),
-          content: faker.lorem.paragraph(),
-        }]
-        const wrapper = mount(<Accordion panels={panels} />)
-        const click = () => wrapper.find('AccordionTitle').simulate('click')
-
-        expect(click).to.not.throw()
-      })
-
-      it('is called with (event, index) on AccordionTitle click', () => {
-        const spy = sandbox.spy()
-        const event = { foo: 'bar' }
-        const panels = [{
-          onClick: spy,
-          title: 'First panel',
-          content: 'First panel content',
-        }, {
-          onClick: spy,
-          title: 'Second panel',
-          content: 'second panel content',
-        }, {
-          onClick: spy,
-          title: 'Third panel',
-          content: 'third panel content',
-        }]
-        const titles = mount(<Accordion panels={panels} />)
-          .find('AccordionTitle')
-
-        titles.at(0).simulate('click', event)
-        spy.should.have.been.calledWithMatch(event, 0)
-
-        titles.at(1).simulate('click', event)
-        spy.should.have.been.calledWithMatch(event, 1)
-
-        titles.at(2).simulate('click', event)
-        spy.should.have.been.calledWithMatch(event, 2)
-      })
-    })
+  it('renders AccordionAccordion component', () => {
+    shallow(<Accordion />)
+      .should.have.descendants(AccordionAccordion)
   })
 })
diff --git a/test/specs/modules/Accordion/AccordionAccordion-test.js b/test/specs/modules/Accordion/AccordionAccordion-test.js
new file mode 100644
index 0000000000..de0340f550
--- /dev/null
+++ b/test/specs/modules/Accordion/AccordionAccordion-test.js
@@ -0,0 +1,202 @@
+import React from 'react'
+
+import AccordionAccordion from 'src/modules/Accordion/AccordionAccordion'
+import AccordionContent from 'src/modules/Accordion/AccordionContent'
+import AccordionTitle from 'src/modules/Accordion/AccordionTitle'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
+
+describe('AccordionAccordion', () => {
+  common.isConformant(AccordionAccordion)
+  common.rendersChildren(AccordionAccordion)
+
+  common.implementsCreateMethod(AccordionAccordion)
+
+  describe('activeIndex', () => {
+    const panels = [
+      { title: 'A', content: 'Something A' },
+      { title: 'B', content: 'Something B' },
+      { title: 'C', content: 'Something C' },
+    ]
+
+    it('defaults to -1', () => {
+      shallow(<AccordionAccordion />)
+        .should.have.state('activeIndex', -1)
+    })
+
+    it('makes Accordion.Content at activeIndex - 0 "active"', () => {
+      const contents = shallow(<AccordionAccordion activeIndex={0} panels={panels} />)
+        .find('AccordionContent')
+
+      contents.at(0).should.have.prop('active', true)
+      contents.at(1).should.have.prop('active', false)
+    })
+
+    it('is toggled to -1 when clicking Title a second time', () => {
+      const wrapper = mount(<AccordionAccordion panels={panels} />)
+      const title = wrapper.find('AccordionTitle').at(0)
+
+      // open panel (activeIndex 0)
+      title.simulate('click')
+      title.should.have.prop('active', true)
+      wrapper.should.have.state('activeIndex', 0)
+
+      // close panel (activeIndex -1)
+      title.simulate('click')
+      title.should.have.prop('active', false)
+      wrapper.should.have.state('activeIndex', -1)
+    })
+
+    it('sets the correct pair of title/content active', () => {
+      const wrapper = shallow(<AccordionAccordion panels={panels} />)
+      wrapper.setProps({ activeIndex: 0 })
+      wrapper.childAt(0).should.have.prop('active', true)
+      wrapper.childAt(1).should.have.prop('active', true)
+      wrapper.childAt(2).should.have.prop('active', false)
+      wrapper.childAt(3).should.have.prop('active', false)
+
+      wrapper.setProps({ activeIndex: 1 })
+      wrapper.childAt(0).should.have.prop('active', false)
+      wrapper.childAt(1).should.have.prop('active', false)
+      wrapper.childAt(2).should.have.prop('active', true)
+      wrapper.childAt(3).should.have.prop('active', true)
+    })
+
+    it('can be an array', () => {
+      const wrapper = shallow(<AccordionAccordion exclusive={false} panels={panels} />)
+      wrapper.setProps({ activeIndex: [0, 1] })
+      wrapper.childAt(0).should.have.prop('active', true)
+      wrapper.childAt(1).should.have.prop('active', true)
+      wrapper.childAt(2).should.have.prop('active', true)
+      wrapper.childAt(3).should.have.prop('active', true)
+      wrapper.childAt(4).should.have.prop('active', false)
+      wrapper.childAt(5).should.have.prop('active', false)
+
+      wrapper.setProps({ activeIndex: [1, 2] })
+      wrapper.childAt(0).should.have.prop('active', false)
+      wrapper.childAt(1).should.have.prop('active', false)
+      wrapper.childAt(2).should.have.prop('active', true)
+      wrapper.childAt(3).should.have.prop('active', true)
+      wrapper.childAt(4).should.have.prop('active', true)
+      wrapper.childAt(5).should.have.prop('active', true)
+    })
+
+    it('can be inclusive and makes Accordion.Content at activeIndex - 1 "active"', () => {
+      const contents = shallow(<AccordionAccordion activeIndex={[0]} exclusive={false} panels={panels} />)
+        .find('AccordionTitle')
+
+      contents.at(0).should.have.prop('active', true)
+      contents.at(1).should.have.prop('active', false)
+    })
+
+    it('can be inclusive and allows multiple open', () => {
+      const contents = shallow(<AccordionAccordion activeIndex={[0, 1]} exclusive={false} panels={panels} />)
+        .find('AccordionTitle')
+
+      contents.at(0).should.have.prop('active', true)
+      contents.at(1).should.have.prop('active', true)
+    })
+
+    it('can be inclusive and can open multiple panels by clicking', () => {
+      const wrapper = mount(<AccordionAccordion exclusive={false} panels={panels} />)
+      const titles = wrapper.find('AccordionTitle')
+      const contents = wrapper.find('AccordionContent')
+
+      titles.at(0).simulate('click')
+      contents.at(0).should.have.prop('active', true)
+      titles.at(0).should.have.prop('active', true)
+
+      titles.at(1).simulate('click')
+      contents.at(1).should.have.prop('active', true)
+      titles.at(1).should.have.prop('active', true)
+    })
+
+    it('can be inclusive and close multiple panels by clicking', () => {
+      const wrapper = mount(<AccordionAccordion defaultActiveIndex={[0, 1]} exclusive={false} panels={panels} />)
+      const titles = wrapper.find('AccordionTitle')
+      const contents = wrapper.find('AccordionContent')
+
+      titles.at(0).simulate('click')
+      contents.at(0).should.have.prop('active', false)
+      titles.at(0).should.have.prop('active', false)
+
+      titles.at(1).simulate('click')
+      contents.at(1).should.have.prop('active', false)
+      titles.at(1).should.have.prop('active', false)
+    })
+  })
+
+  describe('defaultActiveIndex', () => {
+    it('sets the initial activeIndex state', () => {
+      shallow(<AccordionAccordion defaultActiveIndex={123} />)
+        .should.have.state('activeIndex', 123)
+    })
+  })
+
+  describe('onTitleClick', () => {
+    const event = { target: null }
+
+    const onClick = sandbox.spy()
+    const onTitleClick = sandbox.spy()
+    const panels = [
+      { title: { content: 'A', onClick } },
+      { title: 'B' },
+    ]
+
+    it('can be omitted', () => {
+      const click = () => mount(<AccordionAccordion panels={panels} />).find(AccordionTitle).at(1).simulate('click')
+      expect(click).to.not.throw()
+    })
+
+    it('is called with (e, titleProps) when clicked', () => {
+      mount(<AccordionAccordion panels={panels} onTitleClick={onTitleClick} />)
+        .find(AccordionTitle)
+        .at(0)
+        .simulate('click', event)
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event, { index: 0, content: 'A' })
+
+      onTitleClick.should.have.been.calledOnce()
+      onTitleClick.should.have.been.calledWithMatch(event, { index: 0, content: 'A' })
+    })
+  })
+
+  describe('panels', () => {
+    const event = { target: null }
+    const spy = sandbox.spy()
+
+    const panels = [
+      { title: { content: 'A', onClick: spy }, content: { content: 'Content A', 'data-foo': 'something' } },
+      { title: 'B', content: { content: 'Content B', 'data-foo': 'something' } },
+    ]
+    const children = mount(<AccordionAccordion panels={panels} />)
+
+    it('renders children', () => {
+      const titles = children.find(AccordionTitle)
+      const contents = children.find(AccordionContent)
+
+      titles.at(0).should.have.prop('content', 'A')
+      contents.at(0).should.have.prop('content', 'Content A')
+
+      titles.at(1).should.have.prop('content', 'B')
+      contents.at(1).should.have.prop('content', 'Content B')
+    })
+
+    it('onClick can omitted', () => {
+      const click = () => children.find(AccordionTitle).at(1).simulate('click')
+      expect(click).to.not.throw()
+    })
+
+    it('passes onClick handler', () => {
+      children.find(AccordionTitle).at(0).simulate('click', event)
+
+      spy.should.have.been.calledOnce()
+      spy.should.have.been.calledWithMatch(event, { content: 'A', index: 0 })
+    })
+
+    it('passes arbitrary props', () => {
+      children.find(AccordionContent).everyWhere(item => item.should.have.prop('data-foo', 'something'))
+    })
+  })
+})
diff --git a/test/specs/modules/Accordion/AccordionContent-test.js b/test/specs/modules/Accordion/AccordionContent-test.js
index ecd68f3e7a..8b11c47412 100644
--- a/test/specs/modules/Accordion/AccordionContent-test.js
+++ b/test/specs/modules/Accordion/AccordionContent-test.js
@@ -4,6 +4,8 @@ import * as common from 'test/specs/commonTests'
 describe('AccordionContent', () => {
   common.isConformant(AccordionContent)
   common.rendersChildren(AccordionContent)
-  common.propKeyOnlyToClassName(AccordionContent, 'active')
+
   common.implementsCreateMethod(AccordionContent)
+
+  common.propKeyOnlyToClassName(AccordionContent, 'active')
 })
diff --git a/test/specs/modules/Accordion/AccordionTitle-test.js b/test/specs/modules/Accordion/AccordionTitle-test.js
index 7dcb1c960c..bad5cf396d 100644
--- a/test/specs/modules/Accordion/AccordionTitle-test.js
+++ b/test/specs/modules/Accordion/AccordionTitle-test.js
@@ -1,10 +1,28 @@
-import * as common from 'test/specs/commonTests'
+import React from 'react'
 
 import AccordionTitle from 'src/modules/Accordion/AccordionTitle'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 describe('AccordionTitle', () => {
   common.isConformant(AccordionTitle)
   common.rendersChildren(AccordionTitle)
-  common.propKeyOnlyToClassName(AccordionTitle, 'active')
+
   common.implementsCreateMethod(AccordionTitle)
+
+  common.propKeyOnlyToClassName(AccordionTitle, 'active')
+
+  describe('onClick', () => {
+    it('is called with (e, { name, index }) when clicked', () => {
+      const spy = sandbox.spy()
+      const event = { target: null }
+      const props = { content: 'title', index: 0 }
+
+      shallow(<AccordionTitle onClick={spy} {...props} />)
+        .simulate('click', event)
+
+      spy.should.have.been.calledOnce()
+      spy.should.have.been.calledWithMatch(event, props)
+    })
+  })
 })