cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              html, body
  height: 100%

body
  background: #333
  font-family: Helvetica Neue
 
h1, h2
  font-size: 2em
  color: #eee
  display: inline-block
  width: 300px
a
  color: white
p
  text-align: left
  color: #aaa
  
.acc_frame 
  margin: 0 auto 
  background: #ddd

.acc
  margin: 10px 10px 10px 10px
  background: #fff

.acc_title
  display: block
  position: relative
  margin: 0

  background: #333333
  height: 40px
  padding: 20px

.acc_body
  color: #333
  display:none
  height: 0

.acc_body.height_closed
  opacity: 0
  visibility: hidden
  min-height: 0
  display:none
  animation-name: toggle_Frame_close
  animation-duration: 1s
  
.acc_body.height_open
  padding: 20px
  min-height: 200px
  display:block
  animation-name: toggle_Frame
  animation-duration: 2s
  
.acc_icon
  position: absolute
  left : 80%
  width: 40px
  height: 20px
  border-radius: 10px
  background: #fff
  
.acc_icon .open
  position: absolute
  left: 50%
  top: 15%
  width: 15px
  height: 15px
  background: #666
  border-radius: 10px
  animation-name: open
  animation-duration: 0.5s
  
.acc_icon .closed
  position: absolute
  left : 5%
  top: 15%
  width: 15px
  height: 15px
  background: #666
  border-radius: 10px
  animation-name: close
  animation-duration: 0.5s
  
@keyframes open
  0%
    left: 5%
  100%
    left: 50%
  
@keyframes close
  0%
    left: 50%
  100%
    left: 5%
  
@keyframes toggle_Frame
  0%
    min-height: 0px
    display: none
    visibility: hidden
    padding: 0px
    opacity: 0
  1%
    display: block
    visibility: visible
    padding: 20px
    opacity: 0.1
  100%
    min-height: 200px
    display: block
    visibility: visible
    opacity: 1
    

 
@keyframes toggle_Frame_close
  0%
    display: block
    min-height: 200px
    opacity: 1
    visibility: visible
    padding: 20px
  99%
    display: none
    opacity: 0.1
    visibility: hidden
    padding: 20px
  100%
    display: none
    min-height: 0px
    opacity: 0
    visibility: hidden
    padding: 0px
            
          
!
            
              var dummyData = [
  {"title":"a heading", "body":"some content in one"},
  {"title":"a heading", "body":"content on pants here"},
  {"title":"a heading", "body":"some content in one"},
  {"title":"a heading", "body":"some content in one"},
  {"title":"a heading", "body":"some content in one"},
  {"title":"a heading", "body":"some content in one"},
  {"title":"a heading", "body":"some content in two"}
]

class TabEa extends React.Component {  
  
    constructor(props){
      super(props)
          this.state = { open : null }

    }
  
  render() {
    var content = this.props.content;
    return( <div className="acc">
       <span onClick={this.toggle.bind(this)} className="acc_title">
         <h2>{content.title}</h2>
         <span className="acc_icon">
          <span className={this.state.open ? "open" : "closed"}></span>
          </span>
       </span>
        <p className={this.state.open ? "acc_body height_open" :  "acc_body height_closed"}> {content.body}</p>
    </div>)
  }
  
  toggle(){
    this.setState({ open : !this.state.open })   
  }
}  

class Application extends React.Component {  
  render() {
    var content = this.props.content;

    return (
      <div className="acc_frame">
        {content.map(function(data, i){
          return(<TabEa content={data} />)
          })}
      </div>
     )
  }
}

            
      
/*
 * Render the main component into the div#app
 */
React.render(<Application content={dummyData} />, document.getElementById('app'));
            
          
!
999px
Loading ..................

Console