diff --git a/assets/index.less b/assets/index.less
index 73bfed8..7946275 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -7,11 +7,10 @@
     transition-duration: .3s;
     transition-timing-function: ease-in;
     overflow: hidden;
-  }
-
-  &-content-active {
-    opacity: 1;
-    height: auto;
+    > p, > div {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
   }
 }
 
diff --git a/examples/simple.js b/examples/simple.js
index 6fdb6cf..f650db1 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -34,6 +34,15 @@ var Test = React.createClass({
         </Panel>
       );
     }
+    items.push(
+      <Panel header={`This is panel header 4`} key="4">
+        <Collapse defaultActiveKey="1">
+          <Panel header={`This is panel nest panel`} key="1">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+      </Panel>
+    );
 
     return items;
   },
@@ -58,7 +67,7 @@ var Test = React.createClass({
       <button onClick={this.reRender}>reRender</button>
       <button onClick={this.toggle}>{btn}</button><br/><br/>
       <button onClick={this.setActivityKey}>active header 2</button><br/><br/>
-      <Collapse accordion={accordion} activeKey={activeKey} defaultActiveKey={['3']}>{this.getItems()}</Collapse>
+      <Collapse accordion={accordion} activeKey={activeKey} defaultActiveKey={['4']}>{this.getItems()}</Collapse>
     </div>;
   }
 });
diff --git a/package.json b/package.json
index 57c04da..7d36d7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-collapse",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "rc-collapse ui component for react",
   "keywords": [
     "react",
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 9a2a869..8a438ed 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -58,7 +58,8 @@ module.exports = createClass({
   componentDidMount() {
     if (this.props.isActive) {
       var el = findDOMNode(this.refs.content);
-      el.style.height = el.scrollHeight + 'px';
+      el.style.height = 'auto';
+      el.style.opacity = 1;
     }
   },
 
@@ -71,33 +72,26 @@ module.exports = createClass({
       return;
     }
 
-    // current isActive
-    if (!isActive) {
-      var preNode = findDOMNode(this.refs.content);
-      preNode.style.height = preNode.scrollHeight + 'px';
-      preNode.style.opacity = 1;
-      cssAnimation.setTransition(preNode, 'Property', 'height ,opacity');
-      cssAnimation.style(preNode, {
-        height: 0,
-        opacity: 0
-      }, function() {
-        preNode.style.height = '';
-        preNode.style.opacity = '';
-        cssAnimation.setTransition(preNode, 'Property', '');
-      });
-    } else {
-      // from isActive to hide
-      var currentNode = findDOMNode(this.refs.content);
-      currentNode.style.height = 0;
-      cssAnimation.setTransition(currentNode, 'Property', 'height ,opacity');
-      cssAnimation.style(currentNode, {
-        height: currentNode.scrollHeight + 'px',
-        opacity: 1
-      }, function() {
-        currentNode.style.height = 'auto';
-        currentNode.style.opacity = 1;
-        cssAnimation.setTransition(currentNode, 'Property', '');
-      });
-    }
+    this._anim(isActive ? 0 : 1);
+  },
+
+  _anim(opacity) {
+    var el = findDOMNode(this.refs.content);
+    var scrollHeight = el.scrollHeight + 'px';
+
+    // start state
+    el.style.height = opacity ? scrollHeight : 0;
+    el.style.opacity = opacity;
+
+    cssAnimation.setTransition(el, 'Property', 'height ,opacity');
+    cssAnimation.style(el, {
+      height: opacity ? 0 : scrollHeight,
+      opacity: opacity ? 0 : 1
+    }, function() {
+      el.style.height = opacity ? 0 : 'auto';
+      el.style.opacity = opacity ? 0 : 1;
+      cssAnimation.setTransition(el, 'Property', '');
+    });
   }
+
 });