Accordion with description and animation

src/components/Accordion/Accordion.scss

@@ -1,15 +1,33 @@
 @import "../../assets/scss/globals";
 
 .accordion {
+  margin: 0.2em;
   padding: 0.2em;
+  display: flex;
+  flex-flow: column nowrap;
+  border-style: solid;
+  border-color: $light-turquoise;
+  border-width: 1px;
+
+  &__desc {
+    display: flex;
+    margin-top: -100%;
+    -webkit-transition: margin-top 400ms;
+    transition: margin-top 400ms ease-in-out;
+
+    &.open {
+      margin-top: 0;
+    }
+  }
 
   button {
     display: flex;
     flex-flow: row nowrap;
-    border-color: $light-turquoise;
-    border-width: 1px;
     background-color: $white;
     width: 100%;
+    margin: 0;
+    border: 0;
+    outline: none;
   }
 
   h5 {

src/components/Accordion/Accordion.tsx

@@ -1,20 +1,46 @@
 import * as React from "react";
 import "./Accordion.scss";
 import AccordionIcon from "../AccordionIcon";
+import { addHiddenFinalProp } from "mobx/lib/internal";
 
-export interface AccordionProps {}
-export interface AccordionState {}
+export interface AccordionProps {
+  desc?: string;
+}
+export interface AccordionState {
+  isOpen: boolean;
+}
+
+const Description = ({text, visible}) => (
+  <div className={`accordion__desc ${visible ? "open" : ""}`}>
+    <p>{text}</p>
+  </div>
+);
 
 class Accordion extends React.Component<AccordionProps, AccordionState> {
+  constructor(props: AccordionProps) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  handleClick() {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  }
+
   render() {
+    const { isOpen } = this.state;
     return (
       <div className="accordion">
-        <button>
-          <AccordionIcon>
-
-          </AccordionIcon>
+        <button onClick={() => this.handleClick()}>
+          <AccordionIcon open={isOpen} />
           <h5>{this.props.children}</h5>
         </button>
+        <div style={{ overflow: "hidden" }}>
+          <Description visible={isOpen} text={this.props.desc}></Description>
+        </div>
       </div>
     );
   }

src/components/AccordionIcon/AccordionIcon.scss

@@ -14,4 +14,17 @@
   max-height: 40px;
   margin: 0.2em;
   font-size: 40px;
+
+  &.open {
+    background-color: $orange1;
+  }
+}
+
+.accordion-text {
+  &.open {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
 }

src/components/AccordionIcon/AccordionIcon.tsx

@@ -1,14 +1,17 @@
 import * as React from "react";
 import "./AccordionIcon.scss";
 
-export interface AccordionIconProps {}
+export interface AccordionIconProps {
+  open: boolean;
+}
 export interface AccordionIconState {}
 
 class AccordionIcon extends React.Component<AccordionIconProps, AccordionIconState> {
   render() {
+    const { open } = this.props;
     return (
-      <div className="accordion-icon">
-        +
+      <div className={`accordion-icon ${open ? "open" : ""}`}>
+        <div className={`accordion-text ${open ? "open" : ""}`}>+</div>
       </div>
     );
   }

src/pages/GuildPage/GuildPage.tsx

@@ -213,7 +213,13 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
                 </p>
               </div>
               <div className="accordion-list">
-                <Accordion>
+                <Accordion
+                  desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada.
+                        Suspendisse porta diam in massa suscipit congue. Nulla facilisi. Nulla egestas tempus arcu, vitae ultrices risus rhoncus ac. Ut porta orci neque, vel fermentum turpis fermentum in. Curabitur condimentum, mi in tristique pulvinar, mauris nibh bibendum neque, quis tincidunt purus eros quis dolor. Aliquam imperdiet nibh ac quam iaculis, at ullamcorper diam ultricies. Vestibulum egestas consequat justo non vehicula. Nam non egestas tellus.
+                        Praesent vel auctor ligula. Phasellus faucibus vulputate erat, non fringilla sem ultrices non. In vitae elit sit amet nisl interdum ultrices nec in ligula. Ut et turpis risus. Sed mattis varius nisl, in euismod diam fringilla ac. Nunc sed eros augue. Donec sit amet quam ex. Integer luctus nulla at est rutrum, a commodo est dapibus. Maecenas sagittis scelerisque blandit. Morbi congue tortor eros, sit amet vestibulum dolor tempor vitae. In pretium tellus at velit porttitor, vitae rutrum lacus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies metus, nec placerat urna efficitur auctor. Morbi non purus magna. Ut at ex nec nunc dictum ultricies.
+                        Mauris volutpat nec sem sed malesuada. Sed eu scelerisque libero. Phasellus at mauris in ligula congue interdum et sit amet ante. Sed vestibulum, sem non congue molestie, quam massa euismod sem, non porta sem mauris vitae justo. Donec et fringilla tortor. Cras sed purus eget ante elementum mattis. Nunc elit nunc, volutpat sed congue ac, varius a ligula. Aenean sit amet laoreet dolor. Aenean finibus iaculis diam, quis lacinia nisi semper id. Phasellus eu nulla sed risus accumsan finibus. Nulla vel ante id mi vulputate ultrices. Cras finibus elementum tortor, at fringilla arcu facilisis ut. Cras vitae lectus pretium, posuere risus venenatis, congue metus. Phasellus vel dapibus felis.
+                        Maecenas tincidunt orci nulla. Sed maximus tellus nec lorem dignissim aliquet. Maecenas tincidunt dolor sed est laoreet, nec suscipit augue dictum. Vivamus venenatis rutrum molestie. Vestibulum in maximus leo. Duis a euismod nulla. Aenean luctus sodales quam, ut fringilla elit bibendum in. Ut in purus sit amet libero hendrerit hendrerit ac eget nisl. In ac mauris at felis suscipit scelerisque eu eget erat. Fusce accumsan tempus mauris, porta sagittis odio venenatis ac. Integer mollis nulla in velit dignissim imperdiet. Nunc ac magna ullamcorper, pretium mauris et, semper enim. Morbi aliquet accumsan turpis id rutrum. Donec purus tellus, pellentesque non nunc ac, ornare scelerisque ex.
+                  ">
                   Akateeminen komitea
                 </Accordion>
                 <Accordion>