Fixes demo to show single and multiple expand behavior

packages/patternfly-4/react-core/src/components/Accordion/Accordion.md

@@ -5,7 +5,7 @@ cssPrefix: 'pf-c-accordion'
 
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
-## Simple Accordion
+## Simple accordion with a single expand behavior
 ```js
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
@@ -14,82 +14,85 @@ class SimpleAccordion extends React.Component {
     constructor(props) {
     super(props);
     this.state = {
-      expanded: ['ex-toggle2']
+      expanded: 'ex-toggle2'
     };
   }
+
   render() {
-    const toggle = id => {
-      const expanded = this.state.expanded;
-      const index = expanded.indexOf(id);
-      const newExpanded =
-        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
-      this.setState(() => ({ expanded: newExpanded }));
+     const onToggle = id => {
+      if (id === this.state.expanded) {
+        this.setState({expanded: ''});
+      } else {
+        this.setState({expanded: id })
+      }
     };
-
     return (
       <Accordion>
         <AccordionItem>
           <AccordionToggle
-            onClick={() => toggle('ex-toggle1')}
-            isExpanded={this.state.expanded.includes('ex-toggle1')}
+            onClick={() => {onToggle('ex-toggle1')}}
+            isExpanded={this.state.expanded==='ex-toggle1'}
             id="ex-toggle1"
           >
             Item One
           </AccordionToggle>
           <AccordionContent
             id="ex-expand1"
-            isHidden={!this.state.expanded.includes('ex-toggle1')}
+            isHidden={this.state.expanded !== 'ex-toggle1'}
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
             </p>
           </AccordionContent>
         </AccordionItem>
+
         <AccordionItem>
           <AccordionToggle
-            onClick={() => toggle('ex-toggle2')}
-            isExpanded={this.state.expanded.includes('ex-toggle2')}
+            onClick={() => {onToggle('ex-toggle2')}}
+            isExpanded={this.state.expanded === 'ex-toggle2'}
             id="ex-toggle2"
           >
             Item Two
           </AccordionToggle>
           <AccordionContent
             id="ex-expand2"
-            isHidden={!this.state.expanded.includes('ex-toggle2')}
+            isHidden={this.state.expanded !=='ex-toggle2'}
           >
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
               ultrices, faucibus erat id, maximus nunc.
             </p>
           </AccordionContent>
         </AccordionItem>
+
         <AccordionItem>
           <AccordionToggle
-            onClick={() => toggle('ex-toggle3')}
-            isExpanded={this.state.expanded.includes('ex-toggle3')}
+            onClick={() => {onToggle('ex-toggle3')}}
+            isExpanded={this.state.expanded === 'ex-toggle3'}
             id="ex-toggle3"
           >
             Item Three
           </AccordionToggle>
           <AccordionContent
             id="ex-expand3"
-            isHidden={!this.state.expanded.includes('ex-toggle3')}
+            isHidden={this.state.expanded !== 'ex-toggle3'}
           >
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
+
         <AccordionItem>
           <AccordionToggle
-            onClick={() => toggle('ex-toggle4')}
-            isExpanded={this.state.expanded.includes('ex-toggle4')}
+            onClick={() => {onToggle('ex-toggle4')}}
+            isExpanded={this.state.expanded === 'ex-toggle4'}
             id="ex-toggle4"
           >
             Item Four
           </AccordionToggle>
           <AccordionContent
             id="ex-expand4"
-            isHidden={!this.state.expanded.includes('ex-toggle4')}
+            isHidden={this.state.expanded !== 'ex-toggle4'}
           >
             <p>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
@@ -102,17 +105,19 @@ class SimpleAccordion extends React.Component {
             </p>
           </AccordionContent>
         </AccordionItem>
+
         <AccordionItem>
           <AccordionToggle
-            onClick={() => toggle('ex-toggle5')}
-            isExpanded={this.state.expanded.includes('ex-toggle5')}
+            onClick={() => {onToggle('ex-toggle5')}}
+            isExpanded={this.state.expanded === 'ex-toggle5'}
             id="ex-toggle5"
           >
             Item Five
           </AccordionToggle>
           <AccordionContent
             id="ex-expand5"
-            isHidden={!this.state.expanded.includes('ex-toggle5')}
+            isHidden={this.state.expanded !== 'ex-toggle5'}
+
           >
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
@@ -123,7 +128,8 @@ class SimpleAccordion extends React.Component {
 }
 ```
 
-## Fixed Accordion
+## Fixed accordion with multiple expand behavior
+
 ```js
 import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js

@@ -4,13 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { AngleRightIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
 
-const AccordionToggle = ({
-  className,
-  id,
-  isExpanded,
-  children,
-  ...props
-}) => (
+const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
   <dt>
     <h3>
       <button
@@ -21,9 +15,7 @@ const AccordionToggle = ({
         aria-expanded={isExpanded}
       >
         <span className={css(styles.accordionToggleText)}>{children}</span>
-        <span className={css(styles.accordionToggleIcon)}>
-          <AngleRightIcon />
-        </span>
+        <AngleRightIcon className={css(styles.accordionToggleIcon)} />
       </button>
     </h3>
   </dt>

packages/patternfly-4/react-core/src/components/index.ts

@@ -1,6 +1,6 @@
 /** Keep alphabetically sorted */
 export * from './AboutModal';
-export * from './Accordion'; 
+export * from './Accordion';
 export * from './Alert';
 export * from './ApplicationLauncher';
 export * from './Avatar';