<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Accordion - React</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="accordion">
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js'></script>
<script src='https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700);
body {
font-family: 'quicksand';
font-weight: lighter;
background: rgba(92,129,202,1);
background:
-moz-linear-gradient(
left,
rgba(92,129,202,1) 0%,
rgba(249,140,112,1) 100%
);
background:
-webkit-linear-gradient(
left,
rgba(92,129,202,1) 0%,
rgba(249,140,112,1) 100%
);
}
.accordion {
-webkit-box-shadow: 0px 13px 23px -13px rgba(0,0,0,0.5);
width: 420px;
background-color: transparent;
margin: auto;
margin-top: 50px;
}
.title {
height: 30px;
width: 400px;
background-color: rgba(0,0,0, .4);
color: #ffddcc;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
line-height: 2;
font-weight: lighter;
position: relative;
padding: 10px;
z-index: 2000;
border-radius: 4px;
margin-top: 2px;
transition: all .2s ease-in;
}
.title-text {
margin-left: 10px;
}
.title:hover {
cursor: pointer;
background-color: rgba(0,0,0, .5);
}
.title:active {
background-color: rgba(0, 0, 0, .55);
}
.content {
height: 30px;
width: 420px;
background-color: transparent;
border-radius: 4px;
color: white;
font-size: 14px;
text-align: center;
position: relative;
z-index: 1000;
margin-top: -30px;
text-align: left;
transition: all 200ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
}
.content-open {
margin-top: 0px;
height: 200px;
background-color: rgba(0,0,0, .1);
transition: all 350ms cubic-bezier(0.080, 1.090, 0.320, 1.275);
}
.content-text {
padding: 15px;
visibility: hidden;
opacity: 0;
overflow: auto;
transition: all .2s ease-in;
}
.content-text-open {
visibility: visible;
opacity: 1;
transition: all .8s ease-in;
}
.fa-angle-down {
font-size: 20px;
color: rgba(255,255,255, .5);
transition: all .6s cubic-bezier(0.080, 1.090, 0.320, 1.275);
}
.fa-rotate-180 {
color: rgba(255,255,255, 1);
}
.arrow-wrapper {
position: absolute;
margin-left: 375px;
}
const App = React.createClass({ displayName: "App",
render() {
let data = [
{
title: "One",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` },
{
title: "Two",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` },
{
title: "Three",
content: `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt
mollit anim id est laborum.` }];
return (
React.createElement(Accordion, { data: data }));
} });
const Accordion = React.createClass({ displayName: "Accordion",
componentWillMount() {
let accordion = [];
this.props.data.forEach(i => {
accordion.push({
title: i.title,
content: i.content,
open: false });
});
this.setState({
accordionItems: accordion });
},
click(i) {
const newAccordion = this.state.accordionItems.slice();
const index = newAccordion.indexOf(i);
newAccordion[index].open = !newAccordion[index].open;
this.setState({ accordionItems: newAccordion });
},
render() {
const sections = this.state.accordionItems.map((i) =>
React.createElement("div", { key: this.state.accordionItems.indexOf(i) },
React.createElement("div", {
className: "title",
onClick: this.click.bind(null, i) },
React.createElement("div", { className: "arrow-wrapper" },
React.createElement("i", { className: i.open ?
"fa fa-angle-down fa-rotate-180" :
"fa fa-angle-down" })),
React.createElement("span", { className: "title-text" },
i.title)),
React.createElement("div", { className: i.open ?
"content content-open" :
"content" },
React.createElement("div", { className: i.open ?
"content-text content-text-open" :
"content-text" }, " ",
i.content))));
return (
React.createElement("div", { className: "accordion" },
sections));
} });
ReactDOM.render(
React.createElement(App, null),
document.getElementById('accordion'));