<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/matthewvincent/pen/EKKeyX?depth=everything&order=popularity&page=8&q=react&show_forks=false" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@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);
}
.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;
}
</style></head><body>
<div id="accordion">
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><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 >"use strict";
var App = React.createClass({
displayName: "App",
render: function render() {
var data = [{
title: "One",
content: "Lorem ipsum dolor sit amet, \n consectetur adipiscing elit, \n sed do eiusmod tempor incididunt \n ut labore et dolore magna aliqua. \n Ut enim ad minim veniam, quis \n nostrud exercitation ullamco laboris \n nisi ut aliquip ex ea commodo consequat. \n Duis aute irure dolor in reprehenderit \n in voluptate velit esse cillum dolore \n eu fugiat nulla pariatur. Excepteur \n sint occaecat cupidatat non proident, \n sunt in culpa qui officia deserunt \n mollit anim id est laborum."
}, {
title: "Two",
content: "Lorem ipsum dolor sit amet, \n consectetur adipiscing elit, \n sed do eiusmod tempor incididunt \n ut labore et dolore magna aliqua. \n Ut enim ad minim veniam, quis \n nostrud exercitation ullamco laboris \n nisi ut aliquip ex ea commodo consequat. \n Duis aute irure dolor in reprehenderit \n in voluptate velit esse cillum dolore \n eu fugiat nulla pariatur. Excepteur \n sint occaecat cupidatat non proident, \n sunt in culpa qui officia deserunt \n mollit anim id est laborum."
}, {
title: "Three",
content: "Lorem ipsum dolor sit amet, \n consectetur adipiscing elit, \n sed do eiusmod tempor incididunt \n ut labore et dolore magna aliqua. \n Ut enim ad minim veniam, quis \n nostrud exercitation ullamco laboris \n nisi ut aliquip ex ea commodo consequat. \n Duis aute irure dolor in reprehenderit \n in voluptate velit esse cillum dolore \n eu fugiat nulla pariatur. Excepteur \n sint occaecat cupidatat non proident, \n sunt in culpa qui officia deserunt \n mollit anim id est laborum."
}];
return React.createElement(Accordion, { data: data });
}
});
var Accordion = React.createClass({
displayName: "Accordion",
componentWillMount: function componentWillMount() {
var accordion = [];
this.props.data.forEach(function (i) {
accordion.push({
title: i.title,
content: i.content,
open: false
});
});
this.setState({
accordionItems: accordion
});
},
click: function click(i) {
var newAccordion = this.state.accordionItems.slice();
var index = newAccordion.indexOf(i);
newAccordion[index].open = !newAccordion[index].open;
this.setState({ accordionItems: newAccordion });
},
render: function render() {
var _this = this;
var sections = this.state.accordionItems.map(function (i) {
return 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'));
//# sourceURL=pen.js
</script>
</body></html>
