держи свой скрипт, чувак. На 30 процентов я не обратил внимания, но думаю и так норм
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>expander</title>
</head>
<body>
<script type="text/babel">
var data = [{
id: 1,
text: "Задача организации, в особенности же укрепление и развитие структуры позволяет оценить значение дальнейших направлений развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание соответствующий условий активизации."
}, {
id: 2,
text: "Идейные соображения высшего порядка, а также консультация с широким активом представляет собой интересный эксперимент проверки форм развития. Идейные соображения высшего порядка, а также новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям. Идейные соображения высшего порядка, а также реализация намеченных плановых заданий играет важную роль в формировании позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что новая модель организационной деятельности представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что начало повседневной работы по формированию позиции требуют определения и уточнения систем массового участия."
}, {
id: 3,
text: "С другой стороны начало повседневной работы по формированию позиции способствует подготовки и реализации направлений прогрессивного развития. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение существенных финансовых и административных условий."
}];
var ExpanderContainer = React.createClass({
getInitialState: function () {
return { displayedList: data }
},
render: function () {
return (
<div>
{
this.state.displayedList.map(function (el) {
return <ExpanderList id={el.id} text={el.text} key={el.id}/>
})
}
</div>
);
}
})
var ExpanderList = React.createClass({
getInitialState: function () {
return { expanded: false }
},
handleOnClick: function () {
this.setState({
expanded: this.state.expanded ? false : true
})
},
render: function () {
var expanded = this.state.expanded;
var slicedText = this.props.text.slice(0, 30);
var expandedText = this.props.text.slice(30);
var styleHidden = {
display: expanded ? 'inline' : 'none'
}
var styleShowed = {
display: expanded ? 'none' : 'inline'
}
return (
<div onClick={this.handleOnClick}>
<span>{slicedText}</span>
<span className="expand-blue" style={styleShowed}>...Читать далее</span>
<span className="animated" style={styleHidden}>{expandedText}</span>
<span className="expand-blue" style={styleHidden}>Скрыть</span>
</div>
)
}
});
ReactDOM.render(
<ExpanderContainer/>,
document.getElementById("content")
)
</script>
<div id="content"></div>
<style>
@keyframes animatedBackground{
0% { background: yellow; }
100% { background: #FFF; }
}
.expand-blue{
color:blue;
cursor:pointer;
}
.animated{
animation: animatedBackground 2s;
}
</style>
</body>
</html>
открывашка 231.
