From f631c50b7df11882c76b514a7f1328eac0905384 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 20:42:23 +0300
Subject: [PATCH 1/6] Add Collapse

---
 snippets/Collapse.md | 69 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 snippets/Collapse.md

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
new file mode 100644
index 000000000..16cb9dcb3
--- /dev/null
+++ b/snippets/Collapse.md
@@ -0,0 +1,69 @@
+### Collapse
+
+Renders a component with collapsible content.
+
+Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).
+Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.
+Use an object, `style`, to hold the styles for individual components and their states.
+Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
+In the `render()` method, use a `React.Fragment` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
+Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
+Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
+
+```jsx
+class Collapse extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: !!props.collapsed
+    };
+    this.style = {
+      collapsed: {
+        display: 'none'
+      },
+      expanded: {
+        display: 'block'
+      },
+      buttonStyle: {
+        display: 'block',
+        width: '100%'
+      }
+    };
+    this.toggleCollapse = this.toggleCollapse.bind(this);
+  }
+  
+  toggleCollapse() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+  
+  render() {
+    return (
+      <React.Fragment>
+        <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
+          Show/Hide Content
+        </button>
+        <div 
+          style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} 
+          aria-expanded = {this.state.collapsed}
+        >
+          {this.props.children}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+```
+
+```jsx
+ReactDOM.render(
+  <Collapse>
+    <h1>This is a collapse</h1>
+    <p>Hello world!</p>
+  </Collapse>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: visual,children,state,class -->
+
+<!-- expertise: 2 -->

From 81b8f52de82935a4573884bda5174ebba8213d90 Mon Sep 17 00:00:00 2001
From: Robert Mennell <skatcat31@users.noreply.github.com>
Date: Wed, 17 Oct 2018 20:52:01 +0300
Subject: [PATCH 2/6] Update snippets/Collapse.md

---
 snippets/Collapse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 16cb9dcb3..10b43948e 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -33,7 +33,7 @@ class Collapse extends React.Component {
   }
   
   toggleCollapse() {
-    this.setState({ collapsed: !this.state.collapsed });
+    this.setState(state => ({ collapsed: !state.collapsed });
   }
   
   render() {

From 4ca2490c9bfee3261e7b58d1bc120f9b0f4c5506 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 20:52:41 +0300
Subject: [PATCH 3/6] Update Collapse.md

---
 snippets/Collapse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 10b43948e..8bf343904 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -64,6 +64,6 @@ ReactDOM.render(
 );
 ```
 
-<!-- tags: visual,children,state,class -->
+<!-- tags: visual,children,state,fragment,class -->
 
 <!-- expertise: 2 -->

From a5553244082fb2084e060f54a1640f8beb965641 Mon Sep 17 00:00:00 2001
From: Robert Mennell <skatcat31@users.noreply.github.com>
Date: Wed, 17 Oct 2018 21:05:04 +0300
Subject: [PATCH 4/6] Update snippets/Collapse.md

---
 snippets/Collapse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 8bf343904..0c0eab58b 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -38,7 +38,7 @@ class Collapse extends React.Component {
   
   render() {
     return (
-      <React.Fragment>
+      <div>
         <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
           Show/Hide Content
         </button>

From 033008277a86064a4f3b49217e1f16ce2776151d Mon Sep 17 00:00:00 2001
From: Robert Mennell <skatcat31@users.noreply.github.com>
Date: Wed, 17 Oct 2018 21:05:30 +0300
Subject: [PATCH 5/6] Update snippets/Collapse.md

---
 snippets/Collapse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 0c0eab58b..348f7aaf2 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -48,7 +48,7 @@ class Collapse extends React.Component {
         >
           {this.props.children}
         </div>
-      </React.Fragment>
+      </div>
     );
   }
 }

From ca68e94b27c7bf54d82fd4bf78aad4b98251818f Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 17 Oct 2018 21:06:20 +0300
Subject: [PATCH 6/6] Update Collapse.md

---
 snippets/Collapse.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 348f7aaf2..5ab0b3145 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -6,7 +6,7 @@ Use the value of the `collapsed` prop to determine the initial state of the cont
 Set the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.
 Use an object, `style`, to hold the styles for individual components and their states.
 Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
-In the `render()` method, use a `React.Fragment` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
+In the `render()` method, use a `<div>` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.
 Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
 Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
 
@@ -64,6 +64,6 @@ ReactDOM.render(
 );
 ```
 
-<!-- tags: visual,children,state,fragment,class -->
+<!-- tags: visual,children,state,class -->
 
 <!-- expertise: 2 -->