LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.accordion {
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 10%;
  overflow-y: auto;
}

.fold {
  border-bottom: 1px solid rgba(34, 36, 38, 0.35);
}
.fold .fold_trigger {
  text-align: start;
  width: 100%;
  padding: 1rem;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(34, 36, 38, 0.35);
}
.fold .fold_trigger:before {
  font-family: FontAwesome;
  content: "\f107";
  display: block;
  float: left;
  padding-right: 1rem;
  transition: transform 400ms;
  transform-origin: 20%;
  color: rgba(34, 36, 38, 0.35);
}
.fold .fold_trigger.open:before {
  transform: rotateZ(-180deg);
}
.fold .fold_content {
  display: none;
  max-height: 0;
  opacity: 0;
  transition: max-height 400ms linear;
}
.fold .fold_content.open {
  display: block;
  max-height: 400px;
  opacity: 1;
}
JS
class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: -1
    };
  }
  /***
   * Selects the given fold, and deselects if it has been clicked again by setting "active to -1" 
   * */
  selectFold = foldNum => {
    const current = this.state.active === foldNum ? -1 : foldNum;
    this.setState(() => ({ active: current }));
  };

  render() {
    return (
      
{this.props.contents.map((content, i) => { return ( this.selectFold(i)} active={i === this.state.active} /> ); })}
); } } class Fold extends React.Component { render() { return (
{this.props.active ? this.props.content.inner : null}
); } } const pictures = [ "http://unsplash.it/200", "http://unsplash.it/200", "http://unsplash.it/200", ]; var test = (title, text, imageURLs) => { const images=
{imageURLs.map((url,i) => )}
; const inner =

{text}

{images}
; return {title, inner}; }; const testData = [ test('Title', 'Content',pictures ), test('Title', 'Content',pictures ), test('Title', 'Content',pictures ), test('Title', 'Content',pictures ), test('Title', 'Content',pictures ), ]; ReactDOM.render(, document.getElementById('root'));
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv