import React from 'react' import styled from 'styled-components' import downCarrot from '../images/down-carrot.svg' import upCarrot from '../images/up-carrot.svg' const SectionButton = styled.button` outline: none; background-color: transparent; cursor: pointer; color: red; border: none; font-size: 18px; font-weight: bold; padding: 5px 0; transition: opacity .5s; &:after { background: center / contain no-repeat url(${(props) => props.isOpen ? upCarrot : downCarrot}); content: ''; height: 11px; width: 28px; display: inline-block; } &:hover { opacity: .6; } ` class Accordion extends React.Component { constructor (props) { super(props) this.state = { isOpen: true } this.onHide = this.onHide.bind(this) } onHide () { this.setState({isOpen: !this.state.isOpen}) } render () { return ( <div> <SectionButton isOpen={this.state.isOpen} onClick={this.onHide}>{this.props.section}</SectionButton> {this.state.isOpen && <div> {this.props.children} </div> } </div> ) } } export default Accordion
Name | Type | Size | Permission | Actions |
---|---|---|---|---|
home | Folder | 0755 |
|
|
Accordion.js | File | 1.14 KB | 0644 |
|
Button.js | File | 478 B | 0644 |
|
DocLinks.js | File | 1.83 KB | 0644 |
|
FoundTypo.js | File | 820 B | 0644 |
|
MobileSidebar.js | File | 756 B | 0644 |
|
Sidebar.js | File | 619 B | 0644 |
|
layout.js | File | 604 B | 0644 |
|
links.js | File | 970 B | 0644 |
|
navbar.js | File | 3.17 KB | 0644 |
|
scripts.js | File | 610 B | 0644 |
|
seo.js | File | 1.72 KB | 0644 |
|