折叠隐藏/显示元素问题

Question

所以，这是我的问题：这段代码在这里没有用，但它确实在这里：http://jsfiddle.net/e6kaV/33/（我的意思是点击动画后）我还想在80 * 80以下添加一些文字示例在我点击显示它们之后，将与面板一起移动的图像（我已经编写了Model1和Model2）。我在哪里做错了，我怎么能把文字移动？我很抱歉我的英语和不知道所有Javascript的东西，但我会感谢一些帮助，谢谢。

＆＃13;

＆＃13;

$(".pane-launcher").click(function () {
	// Set the effect type
    var effect = 'slide';
 
    // Set the options for the effect type chosen
    var options = { direction: 'up' };
 
    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

＆＃13;

.pane-launcher{
    position:absolute;
    top: 0;
    width:80px;
    height:80px;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:90px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:1;
}
#rules-pane {
    top:80px;
    width:170px;
    background-color:yellow;
}

#scenarios-pane {
    top:80px;
    width:170px;
    background-color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

<div>
<p>
TEXT BELOW
</p>
</div>

＆＃13;

＆＃13;

＆＃13;