1import React from 'react' 2import styled from 'styled-components' 3import downCarrot from '../images/down-carrot.svg' 4import upCarrot from '../images/up-carrot.svg' 5 6const SectionButton = styled.button` 7 outline: none; 8 background-color: transparent; 9 cursor: pointer; 10 color: red; 11 border: none; 12 font-size: 18px; 13 font-weight: bold; 14 padding: 5px 0; 15 transition: opacity .5s; 16 17 &:after { 18 background: center / contain no-repeat url(${(props) => props.isOpen ? upCarrot : downCarrot}); 19 content: ''; 20 height: 11px; 21 width: 28px; 22 display: inline-block; 23 } 24 25 &:hover { 26 opacity: .6; 27 } 28` 29 30class Accordion extends React.Component { 31 constructor (props) { 32 super(props) 33 this.state = { 34 isOpen: true 35 } 36 this.onHide = this.onHide.bind(this) 37 } 38 39 onHide () { 40 this.setState({isOpen: !this.state.isOpen}) 41 } 42 43 render () { 44 return ( 45 <div> 46 <SectionButton isOpen={this.state.isOpen} onClick={this.onHide}>{this.props.section}</SectionButton> 47 {this.state.isOpen && 48 <div> 49 {this.props.children} 50 </div> 51 } 52 </div> 53 ) 54 } 55} 56 57export default Accordion 58
